Apideck Vault is here!Learn more

Search docs

Apideck Components

Modern React UI library for fast development of web interfaces

Get Started

Install the component library. Make sure you have also installed the peer dependencies Tailwind CSS & HeadlessUI.

Terminal

npm install @apideck/components

Update Tailwind configuration

Add or update a `tailwind.config.js` file at the root of your project and wrap your custom Tailwind configuration with the config wrapper from the components library.

tailwind.config.js

const config = require('@apideck/components/tailwind-config')

module.exports = config({
  purge: [],
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
})

Overwrite primary color

If you want to overwrite the primary colors of the components you can add your custom colors to the `primary` color prop inside your Tailwind configuration.

tailwind.config.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',
      }
    }
  }
}
...

Usage

Import components and use them inside your project.

App.js

import { Button } from '@apideck/components'

const App = () => {
  return <Button title="Yo World!" variant="secondary" />
}

export default App