Manual

Add Tailwind CSS

The components are styled with Tailwind CSS, so you'll need to install Tailwind CSS in your project.

Follow the Tailwind CSS installation guide to get started.

Add dependencies

Add these dependencies to your project:

Add tailwind color config to @theme layer

Here's app.css file looks like:

Loading...

Adding color values for those variables

Add the following to your app.css file to set neutral as the base color and blue as the brand color.

Loading...

You can further customize the theme by following the theme setup instructions.

Edit tsconfig.json file (If your project in typescript)

Add the following code to the tsconfig.app.json file to resolve paths for your IDE:

Loading...

The @ alias is just a preference. Feel free to use any other alias you prefer.

Add a cn utility function

Loading...

That's it

You can now start adding components to your project.