feat: unocss-preset-shadcn

unocss.config.ts

@@ -1,8 +1,23 @@
 // https://github.dev/unocss/unocss/tree/main/examples/vite-vue3
+
 import { defineConfig, presetAttributify, presetWind3, transformerDirectives, transformerVariantGroup } from 'unocss';
+import presetAnimations from 'unocss-preset-animations';
 // import presetChinese, { chineseTypography } from 'unocss-preset-chinese';
+import { presetShadcn } from 'unocss-preset-shadcn';
 
 export default defineConfig({
+  // 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)($|\?)/,
+        'src/shadcn/components/**/*.{js,ts}',
+      ],
+    },
+  },
   presets: [
     presetWind3({
       /* prefix: "u-", */
@@ -10,6 +25,21 @@ export default defineConfig({
         dark: '.app-dark',
       },
     }),
+    presetAnimations(),
+    // https://github.com/unocss-community/unocss-preset-shadcn?tab=readme-ov-file#usage
+    // npx shadcn-vue@latest add button
+    presetShadcn(
+      {
+        color: 'zinc',
+        // With default setting for SolidUI, you need to set the darkSelector option.
+        darkSelector: '.app-dark',
+      },
+      {
+        // If you are using reka ui.
+        componentLibrary: 'reka',
+      },
+    ),
+
     // chineseTypography(),
     // presetChinese({
     //   chineseType: 'simplified', // 指定文本为简体中文