Installation

Installation via CLI

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

Initial Setup

Begin by executing this command:

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:

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:

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:

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)
◯ button
◯ menu
◯ sheet

Manual Installation

To begin setting up the design system, make sure tailwindcss is already installed. Then, start by installing these packages:

Next, add Tailwind Variant, Tailwind Merge, and clsx for utility functions:

Following that, include the animation package for managing animations and icons:

CSS

Start by adjusting your main CSS file. For example, if you are using Laravel, this would be resources/css/app.css. You should add the following code:

You can customize your colors using these variables. By default, HQ UI utilizes HSL colors, but you have the option to switch to RGB, HSL, or HSB.

Utils

All of the components need this utility, You need to create this file inside your UI folder as utils.tsx:

Simple Import

Indeed, it's efficient because the index.ts file in your UI folder serves as a hub. Even if the button and badge components are in separate files, you can import them together easily:

import { Button, Sheet, Badge } from '@/components/ui'

So, here's the scoop: your UI folder contains an index.ts file, right? This file consolidates all your components for straightforward access. Simply import them as needed, hassle-free!

If you're not using all those components, feel free to remove the ones you don't need. Later, when you introduce a new component, simply add it to your setup. It's straightforward!

TS Config

Next, incorporate the following settings into your tsconfig.json file:

    {
      "compilerOptions": {
      // ...
      "paths": {
      "@/*": ["./*"]
    }
  }
}

TS Config with src Folder

Ensure you configure the paths property correctly if your project includes a src folder. If you want to organize the UI folder, adjust your paths accordingly like this:

    {
      "compilerOptions": {
      // ...
      "paths": {
      "@/*": ["./src/*"]
    }
  }
}

InteliSense

If you want your development environment to be more intelligent, you can follow instructions here at Tailwind Variants.

Dark Mode

HQ-UI supports dark mode out of the box. Every framework has its own way of implementing dark mode. So you better check the docs list below:

• Vite
• Inertia.js
• Next.js
• Remix
• Astro