unocss-preset-shadcn

Use shadcn/ui or shadcn-vue or shadcn-svelte or SolidUI with UnoCSS.

1. Based on fisand/unocss-preset-shadcn
2. Theme can be easily customized

Usage

Follow the official guide to set up shadcn/ui, shadcn-vue, or shadcn-svelte, or SolidUI. Replace the step to set up Tailwind CSS with UnoCSS.

Install the Tailwind Browser Style Reset.

Then install unocss-preset-shadcn and unocss-preset-animations, and update your unocss.config.ts:

1ni @unocss/reset
2ni -D unocss @unocss/preset-wind3 unocss-preset-animations unocss-preset-shadcn

1// unocss.config.ts
2import { presetWind } from "@unocss/preset-wind3";
3import { defineConfig } from "unocss";
4import presetAnimations from "unocss-preset-animations";
5import { presetShadcn } from "unocss-preset-shadcn";
6
7export default defineConfig({
8  presets: [
9    presetWind(),
10    presetAnimations(),
11    presetShadcn(
12      {
13        color: "red",
14        // With default setting for SolidUI, you need to set the darkSelector option.
15        darkSelector: '[data-kb-theme="dark"]',
16      },
17      {
18        // If you are using reka ui.
19        componentLibrary: "reka",
20      }
21    ),
22  ],
23  // By default, `.ts` and `.js` files are NOT extracted.
24  // If you want to extract them, use the following configuration.
25  // It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte.
26  content: {
27    pipeline: {
28      include: [
29        // the default
30        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
31        // include js/ts files
32        "(components|src)/**/*.{js,ts}",
33      ],
34    },
35  },
36});

[!IMPORTANT] Do not run npx shadcn-ui@latest init or npx shadcn-vue@latest init or npx shadcn-svelte@latest init or npx solidui-cli@latest init to initialize your project.

1. ni lucide-react class-variance-authority clsx tailwind-merge
   • ni lucide-vue-next radix-vue class-variance-authority clsx tailwind-merge for shadcn-vue.
   • ni lucide-svelte tailwind-variants clsx tailwind-merge for shadcn-svelte.
   • ni tailwindcss-animate class-variance-authority clsx tailwind-merge for SolidUI.
2. copy utils.ts into your project at src/lib
3. create components.json or ui.config.json (for SolidUI) in your project root and modify as needed
4. npx shadcn-ui@latest add button
   • npx shadcn-vue@latest add button for shadcn-vue.
   • npx shadcn-svelte@latest add button for shadcn-svelte.
   • npx solidui-cli@latest add button for SolidUI.

[!WARNING] You may need an empty tailwind.config.js file in your project root to make cli commands happy.

If you encounter problems adjusting animation property, this may be because tailwind-animate has duplicate rules about animation and transition. You can refer to Migration Guide from Animations Preset for UnoCSS to solve this problem.

Code to copy

utils.ts: this file usually under src/lib folder.

1import type { ClassValue } from "clsx";
2import { clsx } from "clsx";
3import { twMerge } from "tailwind-merge";
4
5export function cn(...inputs: ClassValue[]) {
6  return twMerge(clsx(inputs));
7}

components.json: this file should under your project root.

React + shadcn-ui

1{
2  "$schema": "https://ui.shadcn.com/schema.json",
3  "style": "default",
4  "tailwind": {
5    "config": "tailwind.config.js",
6    "css": "styles/global.css",
7    "baseColor": "neutral",
8    "cssVariables": true,
9    "prefix": ""
10  },
11  "rsc": false,
12  "tsx": true,
13  "aliases": {
14    "components": "@/components",
15    "utils": "@/lib/utils",
16    "ui": "@/components/ui"
17  }
18}

Vue + shadcn-vue

1{
2  "$schema": "https://shadcn-vue.com/schema.json",
3  "style": "new-york",
4  "typescript": true,
5  "tailwind": {
6    "config": "tailwind.config.js",
7    "css": "src/assets/index.css",
8    "baseColor": "neutral",
9    "cssVariables": true,
10    "prefix": ""
11  },
12  "aliases": {
13    "components": "@/components",
14    "composables": "@/composables",
15    "utils": "@/lib/utils",
16    "ui": "@/components/ui",
17    "lib": "@/lib"
18  },
19  "iconLibrary": "lucide"
20}

Svelte + shadcn-svelte

1{
2  "$schema": "https://shadcn-svelte.com/schema.json",
3  "style": "default",
4  "tailwind": {
5    "config": "tailwind.config.js",
6    "css": "src/app.pcss",
7    "baseColor": "neutral"
8  },
9  "aliases": {
10    "components": "$lib/components",
11    "utils": "$lib/utils"
12  }
13}

ui.config.json: this file should under your project root. This file is for SolidUI.

1{
2  "tsx": true,
3  "componentDir": "./src/components/ui",
4  "tailwind": {
5    "config": "tailwind.config.js",
6    "css": "src/App.css"
7  },
8  "aliases": {
9    "path": "~/*"
10  }
11}

Dynamic Theme

Preview the demo.

If you want to use a dynamic theme, you can pass an array of theme objects to presetShadcn:

1import { defineConfig, presetUno, UserConfig } from "unocss";
2import presetAnimations from "unocss-preset-animations";
3import { builtinColors, presetShadcn } from "unocss-preset-shadcn";
4
5export default defineConfig({
6  presets: [
7    presetUno(),
8    presetAnimations(),
9    presetShadcn(builtinColors.map((c) => ({ color: c }))),
10  ],
11});

Add a theme sync script to your index.html. To dynamically change the theme, you can create a theme switch component.

See also

• fisand/unocss-preset-shadcn
• tobiasfoerg/tailwindcss-shadcn-ui