Installation

Install the necessary packages and set up your project. This tool automates the process, streamlining your setup with no extra steps required.

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)
 ◯ dropdown
 ◯ dialog
 ◯ field
 ◯ forms
 ◯ collections
 ◯ date-and-time

Manual Installation

To begin setting up the design system, 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, Justd utilizes HSL colors, but you have the option to switch to RGB, HSL, or HSB.

Default Utilities

Include this for the default set of utilities:

@layer base {
  * {
    @apply border-muted;
    font-feature-settings: 'cv11', 'ss01';
    font-variation-settings: 'opsz' 850;
  }
 
  body {
    @apply bg-background text-foreground antialiased;
  }
}

Tailwind Configuration

Configure your Tailwind setup by wrapping your tailwind config with withTV from tailwind-variants. Also, make sure to integrate the plugins we've just installed.

Utils

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:

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/*"]
    }
  }
}

Fonts

This is is currently using the Geist font. If you want to use a different font, you can define your font-family in your js or css file.

Stylesheet

When you're working with a stylesheet, you can define your @font-face in your css file.

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("GeistVF.woff") format("woff");
}

Next.js

If you're using Next.js, you don't event need css files. Just define your font in your layout file.

import localFont from 'next/font/local'
 
const fontSans = localFont({
  src: [{path: './fonts/GeistVF.woff'}],
  variable: '--font-sans'
})

Then, apply the fontSans to the body tag like this:

import { cn } from '@/lib/utils'
 
<body
className={cn(
  'min-h-svh font-sans antialiased',
  fontSans.variable,
)}
>

Then, you can use the variable in your tailwind config like this:

import { fontFamily } from 'tailwindcss/defaultTheme'
 
theme: {
  // ...
  extend: {
    fontFamily: {
      sans: ['var(--font-sans)', ...fontFamily.sans],
    },
  },
  // ...
}

For more information, refer to the Tailwind documentation and Next.js documentation.

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