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 and ModalProvider
useToast and ToastProvider
useOutsideClick
usePrevious
useDebounce

Please refer to the Apideck docs for the full documentation.