https://github.com/hyoban/unocss-preset-shadcn
Use shadcn ui with UnoCSS
https://github.com/hyoban/unocss-preset-shadcn
shadcn-svelte shadcn-ui shadcn-vue solidui unocss unocss-preset
Last synced: 8 months ago
JSON representation
Use shadcn ui with UnoCSS
- Host: GitHub
- URL: https://github.com/hyoban/unocss-preset-shadcn
- Owner: hyoban
- License: mit
- Created: 2023-11-30T11:49:53.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-22T02:12:58.000Z (9 months ago)
- Last Synced: 2025-02-23T00:02:49.701Z (8 months ago)
- Topics: shadcn-svelte, shadcn-ui, shadcn-vue, solidui, unocss, unocss-preset
- Language: TypeScript
- Homepage: https://unocss-preset-shadcn.vercel.app
- Size: 555 KB
- Stars: 274
- Watchers: 1
- Forks: 10
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-unocss - unocss-preset-shadcn - preset-shadcn) - Use [shadcn/ui](https://ui.shadcn.com) with UnoCSS by [@zouhang](https://github.com/zouhangwithsweet) and [@hyoban](https://github.com/hyoban). (Community / Presets)
- awesome-shadcnui - Github - preset-shadcn.vercel.app) | ★315 | (Plugins & Extensions)
README
# unocss-preset-shadcn
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![JSDocs][jsdocs-src]][jsdocs-href]
[![License][license-src]][license-href]
Use [shadcn/ui](https://ui.shadcn.com) or [shadcn-vue](https://shadcn-vue.com) or [shadcn-svelte](https://www.shadcn-svelte.com) or [SolidUI](https://www.solid-ui.com) with [UnoCSS](https://unocss.dev).
1. Based on [fisand/unocss-preset-shadcn](https://github.com/fisand/unocss-preset-shadcn)
1. Theme can be easily customized
## Starter
You can easily start a new project without manually setting up the project.
- [shadcn-vue-unocss-starter](https://github.com/hyoban-template/shadcn-vue-unocss-starter)
- [shadcn-svelte-unocss-starter](https://github.com/hyoban-template/shadcn-svelte-unocss-starter)
## Usage
Follow the official guide to set up [shadcn/ui](https://ui.shadcn.com/docs/installation/vite), [shadcn-vue](https://www.shadcn-vue.com/docs/installation/vite.html), or [shadcn-svelte](https://www.shadcn-svelte.com/docs/installation), or [SolidUI](https://www.solid-ui.com/docs/installation/manual). Replace the step to set up Tailwind CSS with [UnoCSS](https://unocss.dev/integrations/vite).
Install the [Tailwind Browser Style Reset](https://unocss.dev/guide/style-reset#tailwind).
Then install `unocss-preset-shadcn` and `unocss-preset-animations`, and update your `unocss.config.ts`:
```bash
ni -D unocss-preset-animations unocss-preset-shadcn
```
```ts
// 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.
1. copy `utils.ts` into your project at `src/lib`
1. create `components.json` or `ui.config.json` (for SolidUI) in your project root and modify as needed
1. `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](https://github.com/jamiebuilds/tailwindcss-animate) has [duplicate rules about animation and transition](https://github.com/jamiebuilds/tailwindcss-animate/pull/46). You can refer to [Migration Guide from Animations Preset for UnoCSS](https://unocss-preset-animations.aelita.me/guide/migration.html) to solve this problem.
## Code to copy
`utils.ts`: this file usually under `src/lib` folder.
```ts
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
```json
{
"$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
```json
{
"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
```json
{
"$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.
```json
{
"tsx": true,
"componentDir": "./src/components/ui",
"tailwind": {
"config": "tailwind.config.js",
"css": "src/App.css"
},
"aliases": {
"path": "~/*"
}
}
```
## Dynamic Theme
Preview the [demo](https://unocss-preset-shadcn.vercel.app).
If you want to use a dynamic theme, you can pass an array of theme objects to `presetShadcn`:
```ts
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](./playground/index.html).
To dynamically change the theme, you can create a [theme switch component](./playground/src/components/theme-switch.tsx).
## See also
- [fisand/unocss-preset-shadcn](https://github.com/fisand/unocss-preset-shadcn)
- [tobiasfoerg/tailwindcss-shadcn-ui](https://github.com/tobiasfoerg/tailwindcss-shadcn-ui)
[npm-version-src]: https://img.shields.io/npm/v/unocss-preset-shadcn?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/unocss-preset-shadcn
[npm-downloads-src]: https://img.shields.io/npm/dm/unocss-preset-shadcn?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/unocss-preset-shadcn
[bundle-src]: https://img.shields.io/bundlephobia/minzip/unocss-preset-shadcn?style=flat&colorA=080f12&colorB=1fa669&label=minzip
[bundle-href]: https://bundlephobia.com/result?p=unocss-preset-shadcn
[license-src]: https://img.shields.io/github/license/hyoban/unocss-preset-shadcn.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/hyoban/unocss-preset-shadcn/blob/main/LICENSE
[jsdocs-src]: https://img.shields.io/badge/jsdocs-reference-080f12?style=flat&colorA=080f12&colorB=1fa669
[jsdocs-href]: https://www.jsdocs.io/package/unocss-preset-shadcn