unocss-preset-shadcn

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

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

Starter

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

Usage

Follow the official guide to set up shadcn/ui, shadcn-vue, or shadcn-svelte. 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",
    }),
  ],
  // 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
        "src/**/*.{js,ts}",
      ],
    },
  },
});

Important

Do not run npx shadcn-ui@latest init or npx shadcn-vue@latest init or npx shadcn-svelte@latest init to initialize your project.

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.
copy utils.ts into your project at src/lib
create components.json in your project root and modify as needed
npx shadcn-ui@latest add button
- npx shadcn-vue@latest add button for shadcn-vue.
- npx shadcn-svelte@latest add button for shadcn-svelte.

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

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.

2. Switching to custom theme

We could have some sort of property that lets the preset know that we want to use custom theme values.
This will then let you set your values in a css file, without loading the inbuilt ones

presetShadcn({
   customThemeVars: true
})

::root{
  ---background: 255 255% 100%;
 // and so on....
}


.dark{
  ---background: 0 0% 100%;
 // and so on....
}

Alternative

No response

Additional context

No response

Validations

Follow our Code of Conduct
Read the Contributing Guide.
Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

hyoban / unocss-preset-shadcn Goto Github PK