Installation

Install Tailwindcss v4

All components are based on tailwindcss v4, you need install it first

install dependencies

Add the following necessary dependencies

npm install class-variance-authority clsx tailwind-merge @tabler/icons-react

Configure alias

add path alias in tsconfig.json

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

Configure styles

styles are based on tailwindcss, no other style plugins are required. Add the following css in the root css file

e.g src/index.css

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

/* basic semantic colors base on tailwindcss colors */
:root {
  --background: #fff;
  --foreground: oklch(0.269 0 0);
  --line: oklch(0.922 0 0);
  --description: oklch(70.8% 0 0);
  /* semantic z-index */
  --loading: 60;
  --popup: 50;
  --tooltip: 40;
}

[data-theme='dark'] {
  --background: oklch(0.269 0 0);
  --foreground: #fafafa;
  --line: oklch(0.371 0 0);
  --description: oklch(55.6% 0 0);
  
}

@theme {
  --color-foreground: var(--foreground);
  --color-background: var(--background);
  --color-line: var(--line);
  --color-description: var(--description);

  --color-primary: var(--color-blue-500);
  --color-primary-active: var(--color-blue-600);
  --color-danger: var(--color-red-500);
  --color-danger-active: var(--color-red-600);
  --color-secondary: var(--color-green-500);
  --color-secondary-active: var(--color-green-600);
  --color-warning: var(--color-orange-500);
  --color-warning-active: var(--color-orange-600);
}

body {
  color: var(--foreground);
  background-color: var(--background);
}

add animation.css(optional) if you use components such as Drawer, Dialog, Tooltip etc.

@theme {
  --animate-fade-in: fade-in 0.15s ease-in;
  --animate-fade-out: fade-out 0.15s ease-out;

  --animate-slide-in-from-top: slide-in-from-top 0.2s linear;
  --animate-slide-out-to-top: slide-out-to-top 0.2s linear;
  --animate-slide-in-from-right: slide-in-from-right 0.2s linear;
  --animate-slide-out-to-right: slide-out-to-right 0.2s linear;
  --animate-slide-in-from-bottom: slide-in-from-bottom 0.2s linear;
  --animate-slide-out-to-bottom: slide-out-to-bottom 0.2s linear;
  --animate-slide-in-from-left: slide-in-from-left 0.2s linear;
  --animate-slide-out-to-left: slide-out-to-left 0.2s linear;

  --animate-zoom-fade-in: zoom-fade-in 0.15s ease-in;
  --animate-zoom-fade-out: zoom-fade-out 0.15s ease-out;

  --animate-accordion-slide-down: accordion-slide-down 0.2s ease-in;
  --animate-accordion-slide-up: accordion-slide-up 0.2s ease-out;
  --animate-collapsible-slide-down: collapsible-slide-down 0.2s ease-in;
  --animate-collapsible-slide-up: collapsible-slide-up 0.2s ease-out;

  /* fade animation */
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }
  /* slide animation */
  @keyframes slide-in-from-top {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes slide-out-to-top {
    to {
      transform: translateY(-100%);
    }
  }
  @keyframes slide-in-from-right {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }
  @keyframes slide-out-to-right {
    to {
      transform: translateX(100%);
    }
  }
  @keyframes slide-in-from-bottom {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes slide-out-to-bottom {
    to {
      transform: translateY(100%);
    }
  }
  @keyframes slide-in-from-left {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
  @keyframes slide-out-to-left {
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes zoom-fade-in {
    from {
      opacity: 0;
      transform: scale(0.94);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  @keyframes zoom-fade-out {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(0.94);
    }
  }

  /* accordion keyframes */
  @keyframes accordion-slide-down {
    from {
      height: 0;
      opacity: 0;
    }
    90% {
      opacity: 1;
    }
    to {
      opacity: 1;
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-slide-up {
    from {
      opacity: 1;
      height: var(--radix-accordion-content-height);
    }
    90% {
      opacity: 0;
    }
    to {
      height: 0;
      opacity: 0;
    }
  }

  /* collapsible keyframes */
  @keyframes collapsible-slide-down {
    from {
      height: 0;
      opacity: 0;
    }
    90% {
      opacity: 1;
    }
    to {
      opacity: 1;
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes collapsible-slide-up {
    from {
      opacity: 1;
      height: var(--radix-collapsible-content-height);
    }
    90% {
      opacity: 0;
    }
    to {
      height: 0;
      opacity: 0;
    }
  }
}

Add the necessary utils functions

src/lib/utils.ts

import { twMerge } from 'tailwind-merge';
import { ClassValue, clsx } from 'clsx';
export function cn(...classnames: ClassValue[]): string {
  return twMerge(clsx(classnames));
}