unocss-preset-shadcn - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #llm #golang #android #machine-learning #deep-learning #linux #java #cli #kubernetes #pytorch #ios

unocss-preset-shadcn

(★ 394)

Use shadcn ui with UnoCSS

파일 탐색기

최종 버전 다운로드 (.zip)

- - ci.yml
  - release.yml
- settings.json
- - app.tsx
  - main.tsx
  - vite-env.d.ts
- .gitignore
- components.json
- index.html
- package.json
- tsconfig.json
- uno.config.ts
- vite.config.ts
- - v3.ts
  - v4.ts
- generate.ts
- index.ts
- types.ts
- v3.ts
- - custom.css
  - dark-selector.css
  - multiple.css
  - neutral-0.75.css
  - presetShadcn()-default-getCSS.css
  - presetShadcn()-default.json
  - presetShadcn()-disable_color-getCSS.css
  - presetShadcn()-disable_color_and_radius-getCSS.css
  - presetShadcn()-disable_global_styles-getCSS.css
  - presetShadcn()-disable_radius-getCSS.css
  - presetShadcn()-use_reka_ui-getCSS.css
  - zinc-0.5.css
- generate.test.ts
.gitignore
.npmrc
.release-it.json
build.config.ts
CONTRIBUTING.md
eslint.config.js
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
tsconfig.json

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/unocss-community/unocss-preset-shadcn

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd unocss-preset-shadcn

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="left">
  <img align="center" with="80" height="80" src="https://raw.githubusercontent.com/fisand/unocss-preset-shadcn/refs/heads/main/public/logo.svg" />
</p>

# 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

## Usage

> 🌈 Starting from v1.0, unocss-preset-shadcn supports presetWind4 v4 by default. If you are using presetWind3, you can import the legacy preset from `unocss-preset-shadcn/v3`

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 @unocss/reset
ni -D unocss @unocss/preset-wind3 unocss-preset-animations unocss-preset-shadcn
```

```ts
// unocss.config.ts
import { presetWind } from "@unocss/preset-wind3";
import { defineConfig } from "unocss";
import presetAnimations from "unocss-preset-animations";
import { presetShadcn } from "unocss-preset-shadcn";

export default defineConfig({
  presets: [
    presetWind(),
    presetAnimations(),
    presetShadcn(
      {
        color: "red",
        // With default setting for SolidUI, you need to set the darkSelector option.
        darkSelector: '[data-kb-theme="dark"]',
      },
      {
        // If you are using reka ui.
        componentLibrary: "reka",
      }
    ),
  ],
  // 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]
> You may need an empty `tailwind.config.js` file in your project root to make cli commands happy.
>
> 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": "new-york",
  "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
{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "new-york",
  "typescript": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/assets/index.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "composables": "@/composables",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib"
  },
  "iconLibrary": "lucide"
}
```

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