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

Starter

You can easily start a new project without manually setting up the project.

• shadcn-vue-unocss-starter
• shadcn-svelte-unocss-starter

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.

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

ni -D unocss-preset-animations unocss-preset-shadcn

// unocss.config.ts
import { defineConfig, presetUno } from 'unocss'
import presetAnimations from 'unocss-preset-animations'
import { presetShadcn } from 'unocss-preset-shadcn'

export default defineConfig({
  presets: [
    presetUno(),
    presetAnimations(),
    presetShadcn({
      color: 'red',
      // With default setting for SolidUI, you need to set the darkSelector option.
      darkSelector: '[data-kb-theme="dark"]',
    }),
  ],
  // By default, `.ts` and `.js` files are NOT extracted.
  // If you want to extract them, use the following configuration.
  // It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte.
  content: {
    pipeline: {
      include: [
        // the default
        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
        // include js/ts files
        '(components|src)/**/*.{js,ts}',
      ],
    },
  },
})

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

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.

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

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

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

React + shadcn-ui

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "styles/global.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "rsc": false,
  "tsx": true,
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

Vue + shadcn-vue

{
  "style": "default",
  "typescript": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/assets/index.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "framework": "vite",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Svelte + shadcn-svelte

{
  "$schema": "https://shadcn-svelte.com/schema.json",
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app.pcss",
    "baseColor": "neutral"
  },
  "aliases": {
    "components": "$lib/components",
    "utils": "$lib/utils"
  }
}

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

{
  "tsx": true,
  "componentDir": "./src/components/ui",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/App.css"
  },
  "aliases": {
    "path": "~/*"
  }
}

Dynamic Theme

Preview the demo.

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

import { defineConfig, presetUno, UserConfig } from 'unocss'
import presetAnimations from 'unocss-preset-animations'
import { builtinColors, presetShadcn } from 'unocss-preset-shadcn'

export default defineConfig({
  presets: [
    presetUno(),
    presetAnimations(),
    presetShadcn(builtinColors.map((c) => ({ color: c }))),
  ],
})

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