@apideck/components

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 sure to include the styles in your project:

import '@apideck/react-vault/dist/styles.css'

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. Also make sure you have the Tailwindcss Forms plugin installed.

// tailwind.config.js

module.exports = {
  content: [
    './node_modules/@apideck/components/**/*.js',
  ],
  plugins: [require('@tailwindcss/forms')]
  ...
}

Also install the

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

• Button
• Card
• CheckBox
• DateInput
• Dropdown
• Modal
• Select
• TextArea
• TextInput
• Toast
• Toggle
• Tooltip

Utils

• useModal and ModalProvider
• useToast and ToastProvider
• useOutsideClick
• usePrevious
• useDebounce

Please refer to the Apideck docs for the full documentation.