README
React Component Library
An open-source UI component library for efficient development of beautiful React applications.
Go to developers.apideck.com/components for the full documentation.
Usage
Install the component library
yarn add @apideck/components
Use components inside your project:
import { Button } from '@apideck/components'
const App = () => {
return <Button variant="primary" size="large" text="Yo, world!" />
}
export default App
If you are NOT using Tailwind CSS in your project, make your to include the styles in your project:
import '@apideck/react-vault/dist/styles.css';
Using Tailwind?
The components library is styled using Tailwind CSS. If you were to use it in a project that also uses Tailwind CSS, you do not have to include the styles.css
file but you should include the package path in the content or purge path of the tailwind.config.js
.
// tailwind.config.js
// Tailwind 3+
module.exports = {
content: [
'./node_modules/@apideck/components/**/*.js',
],
...
}
// Tailwind 1 or 2
module.exports = {
purge: [
'./node_modules/@apideck/components/**/*.js',
],
...
}
If want to overwrite the primary color you can add your custom colors to the primary
color option inside your Tailwind configuration:
...
theme: {
extend: {
colors: {
primary: {
50: '#faf6f9',
100: '#fae7f7',
200: '#f5c4f3',
300: '#f39dee',
400: '#f469e7',
500: '#f53fe1',
600: '#e909ef',
700: '#c81ead',
800: '#9c1a81',
900: '#7c1762',
}
}
}
}
...
Components
Utils
useModal
andModalProvider
useToast
andToastProvider
useOutsideClick
usePrevious
useDebounce
Please refer to the Apideck docs for the full documentation.