Installation

To start using the design system, you need to install the required packages.

Installation via CLI

Before executing the command, ensure that tailwind-css is installed. If not, follow the instructions here for installation.

This CLI will overwrite your tailwind.config and css file. It is recommended to use this in a new project rather than an existing one to avoid manual file additions.

Initial Setup

Begin by executing this command:

In the terminal, run the following command to begin:

npx cleon init

First, it will asks what your project type, if you’re using Next.js, Laravel with Inertia.js or Vite.js with React just select it. If none of them, select the other option and it will asks several question about your project structure.

Add Components

Next, use add [component-name] to add components in your project. This allows for selective installation without the need for a full setup. Install only what you need, or refer to the documentation to manually include components. Here's how to add a combo-box:

In the terminal, run the following command to begin:

npx cleon add combo-box

This command will ensure all necessary components are installed:

✓ combo-box created
✓ select created
✓ dropdown created
✓ field created
✓ list-box created
✓ popover created
✓ button created

Sometimes, you may want to add components individually, such as select and text-field. You can easily do this by using the following command:

In the terminal, run the following command to begin:

npx cleon add select text-field

Select and Add Components

You might prefer to select the components you want to include by adding them without specifying any items. Just use the following command to add components:

In the terminal, run the following command to begin:

npx cleon add

This command will present a list of available components, which you can navigate and select using the arrow keys and spacebar.

? Select components to add: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ dropdown
 ◯ dialog
 ◯ field
 ◯ forms
 ◯ collections
 ◯ date-and-time

Manual Installation

Requirements

To get started with the design system, you need to install the following packages:

Make sure you install the dependencies with the following command:

npm i react-aria-components tailwindcss-react-aria-components tailwind-variants tailwind-merge clsx

After install these package for handling animations and icons:

Make sure you install the dependencies with the following command:

npm i framer-motion cleon-icons tailwindcss-animate embla-carousel-react cmdk sonner

CSS

First of all, you need to modify your root css file, like for example you are using laravel it's resources/css/app.css and you need to add the following code:

Below that you need to add the following code:

Tailwind Configuration

You need to change your tailwind.config.js or tailwind.config.ts file.

Utils

Use a cn helper to make it easier to conditionally add Tailwind CSS classes. All of the components need this utility, You can create this file inside your lib folder or anywhere you like. Here's how to define it in lib/utils.ts: