Alrefai / unocss-preset-shadcn

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

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.

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
• pnpx shadcn add

Base on

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

Docs

• docs
• demo

License

MIT