@apideck/components

Apideck Component Library

An open-source UI component library for the 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

The styles are scoped to the apideck class name so add it to the top-level parent or body tag.

import { ModalProvider, ToastProvider } from '@apideck/components'
import { AppProps } from 'next/app'

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <div className="apideck">
      <ModalProvider>
        <ToastProvider>{children}</ToastProvider>
      </ModalProvider>
    </div>
  )
}

export default App

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/components/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 path of the tailwind.config.js.

// tailwind.config.js

module.exports = {
  content: ['./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:

// tailwind.config.js

module.exports = {
  content: ['./node_modules/@apideck/components/**/*.js'],
  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.