/tails-ui

A Design System for TailwindCSS projects

Primary LanguageTypeScriptMIT LicenseMIT

Tails UI

A Design System for TailwindCSS

Components Storybook Docs License

Documentation

To see all the available components and usages, visit alexandredev3.github.io/tails-ui.com

Visit https://tails-ui-playground.vercel.app/ to play around with the demo.

Usage

Follow these steps to start using the components:

  1. Install TailwindCSS in your existing React project.
$ npm install -D tailwindcss
$ npx tailwindcss init
  1. Install the Tails UI Tailwind plugin as a dev dependency on your project.
$ npm install -D @tails-ui/plugin
  1. Install the components that you want to use in your project.
$ npm install @tails-ui/checkbox @tails-ui/button

Tails UI allows you to download only those components that you really need in your project.

  1. Add the Tails UI plugin to your project tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [require('@tails-ui/plugin')]
}
  1. Add the Tails UI components template path to your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./node_modules/@tails-ui/**/*.js"
  ],
}
  1. Now you can start to use the components!
function Example() {
  return (
    <main>
      <div className="flex items-center gap-2">
        <Checkbox
          id="terms"
          name="terms"
        >
          <Checkbox.Icon />
        </Checkbox>
        <Label
          className="text-sm"
          htmlFor="terms"
        >
          Accept terms & conditions
        </Label>
      </div>
    </main>
  );
}

Contributing