Manual Installation

Add dependencies to your project manually.

Add Tailwind CSS

Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.

Follow the Tailwind CSS installation instructions to get started.

Add dependencies

Add the following dependencies to your project:


pnpm add class-variance-authority clsx tailwind-merge @lucide/vue tw-animate-css

Configure path aliases

Configure the path aliases in your tsconfig.json file.

tsconfig.json

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

The @ alias is a preference. You can use other aliases if you want.

Configure styles

Add the following to your styles/globals.css. The tokens ship with the package, so there is nothing to paste and nothing to keep in sync — see the theming section for how to override them.

src/styles/globals.css

@import "tailwindcss";
@import "tw-animate-css";

/* Component variants: data-open, data-checked and friends. */
@import "hui-kit/tailwind.css";
/* The theme tokens themselves. */
@import "hui-kit/theme.css";

@custom-variant dark (&:is(.dark *));

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

Override any token in your own :root / .dark after the import — that is the supported way to theme an app.

Add a cn helper

lib/utils.ts

import type { ClassValue } from 'clsx'
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Create a `components.json` file

Create a components.json file in the root of your project.

components.json

{
  "$schema": "https://clientik.github.io/hui-vue/schema.json",
  "style": "hui",
  "typescript": true,
  "tailwind": {
    "config": "",
    "css": "src/styles/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "composables": "@/composables",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib"
  },
  "iconLibrary": "lucide",
  "pointer": false,
  "rtl": false
}

That's it

You can now start adding components to your project.

Laravel components.json

On This Page

Add Tailwind CSS Add dependencies Configure path aliases Configure styles Add a cn helper Create a components.json file That's it