unocss-preset-shadcn

Use shadcn/ui or shadcn-vue or shadcn-svelte or SolidUI 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, 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
        '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.

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.
copy utils.ts into your project at src/lib
create components.json or ui.config.json (for SolidUI) 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.
- 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.

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