unocss-preset-shadcn

shadcn-ui but unocss, working with shadcn-ui or shadcn-vue

lib	status
shadcn-ui	✅
shadcn-vue	✅

Motivation

As a fan of unocss and shadcn-ui, I wanted to combine them to take advantage of the speed and convenience that unocss brings. So I created this unocss-preset.

Quick start

If you prefer to use npm module, check hyoban/unocss-preset-shadcn

❗️Notice

from unocss@0.57.0 color vars should remove dots. Change --background: 0,0%,100%; to --background: 0 0% 100%; issue

Use the components codes in this project is unnecessary. These component codes are just for demonstration purposes. Just need unocss preset.

• install unocss
• touch uno.config.ts. copy preset.shadcn.ts into your project from here, then add it into uno.config.ts.
• select and copy theme color from shadcn-ui, then add it into preset.shadcn.ts's getCSS part.

If you use shadcn-vue, you should add some fields in uno.config.ts

// uno.config.ts
{
  ...yourConfig,
  shortcuts: [
    {
      'animate-accordion-up': 'accordion-up',
      'animate-accordion-down': 'accordion-down',
    },
  ],
  include: [/\.ts/, /\.vue$/, /\.vue\?vue/],
}

Prepare to use shadcn-ui

• pnpm add lucide-react class-variance-authority clsx tailwind-merge
• copy utils.ts into your project at src/lib

❗️If you use shadcn-cli to add components:

• create components.json in your project root and modify as needed
• pnpm dlx shadcn-ui@latest add [component]

Base on

• vite
• radix-ui
• unocss
• shadcn-ui
• shadcn-vue

Docs

• docs
• demo

Project use unocss-preset-shadcn

• react: vite-wagmi-starter
• vue: gen-githubstyle-markdown

License

MIT