Skip to content

fisand/unocss-preset-shadcn

Repository files navigation

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 [email protected] 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.

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

Project use unocss-preset-shadcn

License

MIT