The File Picker arrived!Read the announcement

Search docs

Apideck Components

An open-source React component library built with Tailwind

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'

export default function App() {
  return <Button text="Yo world" />
}