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:
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: