New developer docs: Build by use case. Explore APIs, demos, and agent tools

Apideck Components

An open-source React component library built with Tailwind

Get Started

Install the component library.

Terminal

npm install @apideck/components

Usage

Import components and use them inside your project.

App.js

import { Button } from '@apideck/components'

export default function App() {
  return <Button variant="primary" size="large" text="Yo, world!" />
}

Add styles

The components library is styled using Tailwind CSS. If you are NOT using Tailwind CSS in your project, you have to load the CSS manually.

App.js

import '@apideck/components/dist/styles.css'

Update tailwind config

If you were to use the component library in a project that already 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')]
  ...
}

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