unocss-preset-shadcn

Use shadcn/ui with UnoCSS

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

Usage

Follow the Install and configure Vite guide to setup shadcn/ui.

Replace the second step with the following operation after setup UnoCSS:

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",
    }),
  ],
  // By default, `.ts` and `.js` files are NOT extracted.
  // If you want to extract them, you can use the following configuration.
  // It's necessary to add following configuration if you are using shadcn-vue.
  content: {
    pipeline: {
      include: [
        /\.(vue|svelte|[jt]s|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
      ],
    },
  },
})

[!IMPORTANT] Do not run shadcn-ui init command.

1. ni lucide-react class-variance-authority clsx tailwind-merge
   • Run ni lucide-vue-next radix-vue class-variance-authority clsx tailwind-merge if you are using shadcn-vue.
2. copy utils.ts into your project at src/lib
3. create components.json in your project root and modify as needed
4. pnpm dlx shadcn-ui@latest add button
   • Run npx shadcn-vue@latest add button if you are using shadcn-vue.

[!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

import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

import type { ClassValue } from "clsx"

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

React + shadcn-ui

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

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"
  }
}

Dynamic Theme

Preview the demo.

If you want to use dynamic theme, you can pass a 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. And to dynamically change the theme, you can create a theme switch component.