Skip to content

alexandredev3/tails-ui

Folders and files

NameName
Last commit message
Last commit date
Jan 18, 2023
Jan 17, 2023
Jan 15, 2023
Oct 14, 2022
Jan 15, 2023
Jan 13, 2023
Jan 28, 2023
Jan 15, 2023
Oct 14, 2022
Jan 12, 2023
Jan 12, 2023
Jan 12, 2023
Jan 10, 2023
Jan 10, 2023
Jan 10, 2023
Jan 17, 2023
Jan 12, 2023
Jan 18, 2023
Jan 18, 2023
Oct 14, 2022
Oct 14, 2022
Jan 13, 2023
Oct 12, 2022
Jan 14, 2023

Repository files navigation

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