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