Use shadcn/ui or shadcn-vue or shadcn-svelte or SolidUI with UnoCSS.
- Based on fisand/unocss-preset-shadcn
- Theme can be easily customized
You can easily start a new project without manually setting up the project.
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.
ni lucide-react class-variance-authority clsx tailwind-mergeni lucide-vue-next radix-vue class-variance-authority clsx tailwind-mergefor shadcn-vue.ni lucide-svelte tailwind-variants clsx tailwind-mergefor shadcn-svelte.ni tailwindcss-animate class-variance-authority clsx tailwind-mergefor SolidUI.
- copy
utils.tsinto your project atsrc/lib - create
components.jsonorui.config.json(for SolidUI) in your project root and modify as needed npx shadcn-ui@latest add buttonnpx shadcn-vue@latest add buttonfor shadcn-vue.npx shadcn-svelte@latest add buttonfor shadcn-svelte.npx solidui-cli@latest add buttonfor 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.
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": "~/*"
}
}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.