feat: support for shadcn-vue

Author: hyoban

README.md

@@ -35,16 +35,28 @@ export default defineConfig({
       color: "red",
     }),
   ],
+  // By default, `.ts` and `.js` files are NOT extracted.
+  // If you want to extract them, you can use the following configuration.
+  // It's necessary to add following configuration if you are using shadcn-vue.
+  content: {
+    pipeline: {
+      include: [
+        /\.(vue|svelte|[jt]s|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+      ],
+    },
+  },
 })
 ```
 
 > [!IMPORTANT]
 > Do not run `shadcn-ui init` command.
 
-1. `pnpm add lucide-react class-variance-authority clsx tailwind-merge`
+1. `ni lucide-react class-variance-authority clsx tailwind-merge`
+   - Run `ni lucide-vue-next radix-vue class-variance-authority clsx tailwind-merge` if you are using shadcn-vue.
 1. copy `utils.ts` into your project at `src/lib`
 1. create `components.json` in your project root and modify as needed
 1. `pnpm dlx shadcn-ui@latest add button`
+   - Run `npx shadcn-vue@latest add button` if you are using shadcn-vue.
 
 > [!WARNING]
 > 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.
@@ -62,6 +74,8 @@ export function cn(...inputs: ClassValue[]) {
 }
 ```
 
+React + shadcn-ui
+
 ```json
 {
   "$schema": "https://ui.shadcn.com/schema.json",
@@ -81,6 +95,26 @@ export function cn(...inputs: ClassValue[]) {
 }
 ```
 
+Vue + shadcn-vue
+
+```json
+{
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/assets/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "framework": "vite",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
+```
+
 ## Dynamic Theme
 
 Preview the [demo](https://unocss-preset-shadcn.vercel.app).

examples/shadcn-vue/package.json

@@ -9,20 +9,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@unocss/reset": "^0.58.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-vue-next": "^0.299.0",
     "radix-vue": "^1.2.5",
     "tailwind-merge": "^2.1.0",
-    "tailwindcss-animate": "^1.0.7",
     "vue": "^3.3.11"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.32",
-    "tailwindcss": "^3.4.0",
     "typescript": "^5.2.2",
+    "unocss": "^0.58.0",
+    "unocss-preset-animations": "^1.0.1",
+    "unocss-preset-shadcn": "workspace:^",
     "vite": "^5.0.8",
     "vue-tsc": "^1.8.25"
   }

examples/shadcn-vue/postcss.config.js

@@ -1,7 +1,23 @@
 <script setup lang="ts">
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { ref } from "vue"
+
 import Button from "./components/ui/button/Button.vue"
+
+const isOpen = ref(false)
 </script>
 
 <template>
   <Button>Button</Button>
+  <Collapsible v-model:open="isOpen">
+    <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
+    <CollapsibleContent>
+      Yes. Free to use for personal and commercial projects. No attribution
+      required.
+    </CollapsibleContent>
+  </Collapsible>
 </template>

examples/shadcn-vue/src/App.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { CollapsibleRoot, useEmitAsProps } from "radix-vue"
+
+import type { CollapsibleRootEmits, CollapsibleRootProps } from "radix-vue"
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+</script>
+
+<template>
+  <CollapsibleRoot
+    v-slot="{ open }"
+    v-bind="{ ...props, ...useEmitAsProps(emits) }"
+  >
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>

examples/shadcn-vue/src/assets/index.css

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { CollapsibleContent } from "radix-vue"
+
+import type { CollapsibleContentProps } from "radix-vue"
+
+const props = defineProps<CollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent
+    v-bind="props"
+    class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>

examples/shadcn-vue/src/components/ui/collapsible/Collapsible.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { CollapsibleTrigger } from "radix-vue"
+
+import type { CollapsibleTriggerProps } from "radix-vue"
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>

examples/shadcn-vue/src/components/ui/collapsible/CollapsibleContent.vue

@@ -0,0 +1,3 @@
+export { default as Collapsible } from "./Collapsible.vue"
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.vue"
+export { default as CollapsibleContent } from "./CollapsibleContent.vue"

examples/shadcn-vue/src/components/ui/collapsible/CollapsibleTrigger.vue

@@ -1,7 +1,7 @@
 import { createApp } from "vue"
 
-import "./assets/index.css"
-import "./style.css"
+import "@unocss/reset/tailwind.css"
+import "virtual:uno.css"
 
 import App from "./App.vue"