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

Install the required dependencies for Zaidan components:

pnpm add class-variance-authority clsx tailwind-merge lucide-solid tw-animate-css
npm i class-variance-authority clsx tailwind-merge lucide-solid tw-animate-css
yarn add class-variance-authority clsx tailwind-merge lucide-solid tw-animate-css
bun add class-variance-authority clsx tailwind-merge lucide-solid tw-animate-css

Configure Path Aliases

Update your tsconfig.json with path aliases:

1
{
2
  "compilerOptions": {
3
    "baseUrl": ".",
4
    "paths": {
5
      "@/*": ["./src/*"]
6
    }
7
  }
8
}

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

Configure Styles

Create or update your global CSS file with Zaidan's CSS variables. Add the following to your CSS:

1
@import "tailwindcss";
2
@import "tw-animate-css";
3

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

6
:root {
7
  --background: oklch(1 0 0);
8
  --foreground: oklch(0.145 0 0);
9
  --card: oklch(1 0 0);
10
  --card-foreground: oklch(0.145 0 0);
11
  --popover: oklch(1 0 0);
12
  --popover-foreground: oklch(0.145 0 0);
13
  --primary: oklch(0.205 0 0);
14
  --primary-foreground: oklch(0.985 0 0);
15
  --secondary: oklch(0.97 0 0);
16
  --secondary-foreground: oklch(0.205 0 0);
17
  --muted: oklch(0.97 0 0);
18
  --muted-foreground: oklch(0.556 0 0);
19
  --accent: oklch(0.97 0 0);
20
  --accent-foreground: oklch(0.205 0 0);
21
  --destructive: oklch(0.577 0.245 27.325);
22
  --destructive-foreground: oklch(0.577 0.245 27.325);
23
  --border: oklch(0.922 0 0);
24
  --input: oklch(0.922 0 0);
25
  --ring: oklch(0.708 0 0);
26
  --chart-1: oklch(0.646 0.222 41.116);
27
  --chart-2: oklch(0.6 0.118 184.704);
28
  --chart-3: oklch(0.398 0.07 227.392);
29
  --chart-4: oklch(0.828 0.189 84.429);
30
  --chart-5: oklch(0.769 0.188 70.08);
31
  --radius: 0.625rem;
32
  --sidebar: oklch(0.985 0 0);
33
  --sidebar-foreground: oklch(0.145 0 0);
34
  --sidebar-primary: oklch(0.205 0 0);
35
  --sidebar-primary-foreground: oklch(0.985 0 0);
36
  --sidebar-accent: oklch(0.97 0 0);
37
  --sidebar-accent-foreground: oklch(0.205 0 0);
38
  --sidebar-border: oklch(0.922 0 0);
39
  --sidebar-ring: oklch(0.708 0 0);
40
}
41

42
.dark {
43
  --background: oklch(0.145 0 0);
44
  --foreground: oklch(0.985 0 0);
45
  --card: oklch(0.145 0 0);
46
  --card-foreground: oklch(0.985 0 0);
47
  --popover: oklch(0.145 0 0);
48
  --popover-foreground: oklch(0.985 0 0);
49
  --primary: oklch(0.985 0 0);
50
  --primary-foreground: oklch(0.205 0 0);
51
  --secondary: oklch(0.269 0 0);
52
  --secondary-foreground: oklch(0.985 0 0);
53
  --muted: oklch(0.269 0 0);
54
  --muted-foreground: oklch(0.708 0 0);
55
  --accent: oklch(0.269 0 0);
56
  --accent-foreground: oklch(0.985 0 0);
57
  --destructive: oklch(0.396 0.141 25.723);
58
  --destructive-foreground: oklch(0.637 0.237 25.331);
59
  --border: oklch(0.269 0 0);
60
  --input: oklch(0.269 0 0);
61
  --ring: oklch(0.439 0 0);
62
  --chart-1: oklch(0.488 0.243 264.376);
63
  --chart-2: oklch(0.696 0.17 162.48);
64
  --chart-3: oklch(0.769 0.188 70.08);
65
  --chart-4: oklch(0.627 0.265 303.9);
66
  --chart-5: oklch(0.645 0.246 16.439);
67
  --sidebar: oklch(0.205 0 0);
68
  --sidebar-foreground: oklch(0.985 0 0);
69
  --sidebar-primary: oklch(0.488 0.243 264.376);
70
  --sidebar-primary-foreground: oklch(0.985 0 0);
71
  --sidebar-accent: oklch(0.269 0 0);
72
  --sidebar-accent-foreground: oklch(0.985 0 0);
73
  --sidebar-border: oklch(0.269 0 0);
74
  --sidebar-ring: oklch(0.439 0 0);
75
}
76

77
@theme inline {
78
  --color-background: var(--background);
79
  --color-foreground: var(--foreground);
80
  --color-card: var(--card);
81
  --color-card-foreground: var(--card-foreground);
82
  --color-popover: var(--popover);
83
  --color-popover-foreground: var(--popover-foreground);
84
  --color-primary: var(--primary);
85
  --color-primary-foreground: var(--primary-foreground);
86
  --color-secondary: var(--secondary);
87
  --color-secondary-foreground: var(--secondary-foreground);
88
  --color-muted: var(--muted);
89
  --color-muted-foreground: var(--muted-foreground);
90
  --color-accent: var(--accent);
91
  --color-accent-foreground: var(--accent-foreground);
92
  --color-destructive: var(--destructive);
93
  --color-destructive-foreground: var(--destructive-foreground);
94
  --color-border: var(--border);
95
  --color-input: var(--input);
96
  --color-ring: var(--ring);
97
  --color-chart-1: var(--chart-1);
98
  --color-chart-2: var(--chart-2);
99
  --color-chart-3: var(--chart-3);
100
  --color-chart-4: var(--chart-4);
101
  --color-chart-5: var(--chart-5);
102
  --radius-sm: calc(var(--radius) - 4px);
103
  --radius-md: calc(var(--radius) - 2px);
104
  --radius-lg: var(--radius);
105
  --radius-xl: calc(var(--radius) + 4px);
106
  --color-sidebar: var(--sidebar);
107
  --color-sidebar-foreground: var(--sidebar-foreground);
108
  --color-sidebar-primary: var(--sidebar-primary);
109
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
110
  --color-sidebar-accent: var(--sidebar-accent);
111
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
112
  --color-sidebar-border: var(--sidebar-border);
113
  --color-sidebar-ring: var(--sidebar-ring);
114
}
115

116
@layer base {
117
  * {
118
    @apply border-border outline-ring/50;
119
  }
120
  body {
121
    @apply bg-background text-foreground;
122
  }
123
}

Add a cn helper

1
import { clsx, type ClassValue } from "clsx"
2
import { twMerge } from "tailwind-merge"
3

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

Create `components.json` file

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

1
{
2
  "$schema": "https://ui.shadcn.com/schema.json",
3
  "style": "kobalte",
4
  "rsc": false,
5
  "tsx": true,
6
  "tailwind": {
7
    "config": "",
8
    "css": "src/index.css",
9
    "baseColor": "neutral", // or "gray", "stone", "zinc"
10
    "cssVariables": true,
11
    "prefix": ""
12
  },
13
  "iconLibrary": "lucide",
14
  "rtl": false,
15
  "aliases": {
16
    "components": "@/components",
17
    "utils": "@/lib/utils",
18
    "ui": "@/components/ui",
19
    "lib": "@/lib",
20
    "hooks": "@/hooks"
21
  },
22
  "menuColor": "default", // or "inverted"
23
  "menuAccent": "subtle", // or "bold"
24
  "registries": {
25
    "@zaidan": "https://zaidan.carere.dev/r/{style}/{name}.json"
26
  }
27
}

Set tailwind.css to the global CSS file you configured above, and make sure that file is imported by your application.

Zaidan components require a style in addition to the CSS variables above. The style defines component classes such as z-button, z-button-variant-default, and z-button-size-default. Without it, components will appear unstyled.

After creating components.json, install a style such as Vega:

pnpm dlx shadcn@latest add @zaidan/style-vega
npx shadcn@latest add @zaidan/style-vega
yarn dlx shadcn@latest add @zaidan/style-vega
bunx --bun shadcn@latest add @zaidan/style-vega

This adds styles/base.css and styles/utilities.css and wires their imports into your configured global CSS file. You can choose another style by replacing style-vega with style-nova, style-maia, style-lyra, style-mira, style-luma, style-sera, or style-rhea.

To customize the full design system, including the style, colors, and fonts, use

Add Components

You can now start adding components to your project.

pnpm dlx shadcn@latest add @zaidan/button
npx shadcn@latest add @zaidan/button
yarn dlx shadcn@latest add @zaidan/button
bunx --bun shadcn@latest add @zaidan/button