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.
Follow these steps to start using the components:
$ npm install -D tailwindcss
$ npx tailwindcss init
$ npm install -D @tails-ui/plugin
$ npm install @tails-ui/checkbox @tails-ui/button
Tails UI allows you to download only those components that you really need in your project.
tailwind.config.js
file./** @type {import('tailwindcss').Config} */
module.exports = {
plugins: [require('@tails-ui/plugin')]
}
tailwind.config.js
file./** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./node_modules/@tails-ui/**/*.js"
],
}
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>
);
}