chore: finish shadcn-svelte demo

Author: hyoban

.gitignore

@@ -9,3 +9,4 @@ lib-cov
 logs
 node_modules
 temp
+.svelte-kit

README.md

@@ -6,16 +6,21 @@
 [![JSDocs][jsdocs-src]][jsdocs-href]
 [![License][license-src]][license-href]
 
-Use [shadcn/ui](https://ui.shadcn.com) or [shadcn-vue](https://shadcn-vue.com) with [UnoCSS](https://unocss.dev)
+Use [shadcn/ui](https://ui.shadcn.com) or [shadcn-vue](https://shadcn-vue.com) or [shadcn-svelte](https://www.shadcn-svelte.com) with [UnoCSS](https://unocss.dev)
 
 1. Based on [fisand/unocss-preset-shadcn](https://github.com/fisand/unocss-preset-shadcn)
 1. Theme can be easily customized
 
 ## Usage
 
-Follow the [Install and configure Vite guide](https://ui.shadcn.com/docs/installation/vite) to setup shadcn/ui, or [Install and configure Vite](https://www.shadcn-vue.com/docs/installation/vite.html) to setup shadcn-vue.
+Follow official guide to setup shadcn/ui, shadcn-vue or shadcn-svelte.
 
-Replace the second step with the following operation after setup [UnoCSS](https://unocss.dev/integrations/vite):
+1. [shadcn/ui](https://ui.shadcn.com/docs/installation/vite)
+1. [shadcn-vue](https://www.shadcn-vue.com/docs/installation/vite.html)
+1. [shadcn-svelte](https://www.shadcn-svelte.com/docs/installation)
+
+Replace the step to setup Tailwind CSS with [UnoCSS](https://unocss.dev/integrations/vite).
+Then install `unocss-preset-shadcn` and `unocss-preset-animations`, and update your `unocss.config.ts`:
 
 ```bash
 ni -D unocss-preset-animations unocss-preset-shadcn
@@ -37,7 +42,7 @@ export default defineConfig({
   ],
   // 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.
+  // It's necessary to add following configuration if you are using shadcn-vue or shadcn-svelte.
   content: {
     pipeline: {
       include: [
@@ -49,14 +54,16 @@ export default defineConfig({
 ```
 
 > [!IMPORTANT]
-> Do not run `npx shadcn-ui@latest init` or `npx shadcn-vue@latest init`
+> Do not run `npx shadcn-ui@latest init` or `npx shadcn-vue@latest init` or `npx shadcn-svelte@latest init` to initialize your project.
 
 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.
+   - `ni lucide-vue-next radix-vue class-variance-authority clsx tailwind-merge` for shadcn-vue.
+   - `ni lucide-svelte tailwind-variants clsx tailwind-merge` for shadcn-svelte.
 1. copy `utils.ts` into your project at `src/lib`
 1. create `components.json` in your project root and modify as needed
 1. `npx shadcn-ui@latest add button`
-   - Run `npx shadcn-vue@latest add button` if you are using shadcn-vue.
+   - `npx shadcn-vue@latest add button` for shadcn-vue.
+   - `npx shadcn-svelte@latest add button` for shadcn-svelte.
 
 > [!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.
@@ -115,6 +122,24 @@ Vue + shadcn-vue
 }
 ```
 
+Svelte + shadcn-svelte
+
+```json
+{
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "default",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app.pcss",
+    "baseColor": "neutral"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils"
+  }
+}
+```
+
 ## Dynamic Theme
 
 Preview the [demo](https://unocss-preset-shadcn.vercel.app).

examples/shadcn-svelte/package.json

@@ -13,18 +13,19 @@
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.32",
-    "postcss-load-config": "^5.0.2",
+    "@unocss/extractor-svelte": "^0.58.0",
     "svelte": "^4.2.7",
     "svelte-check": "^3.6.0",
-    "tailwindcss": "^3.3.6",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
+    "unocss": "^0.58.0",
+    "unocss-preset-animations": "^1.0.1",
+    "unocss-preset-shadcn": "workspace:^",
     "vite": "^5.0.3"
   },
   "type": "module",
   "dependencies": {
+    "@unocss/reset": "^0.58.0",
     "bits-ui": "^0.11.8",
     "clsx": "^2.0.0",
     "lucide-svelte": "^0.299.0",

examples/shadcn-svelte/postcss.config.cjs

@@ -1 +1,5 @@
-<script>import "../app.pcss";</script><slot></slot>
+<script>
+import '@unocss/reset/tailwind.css';
+import 'virtual:uno.css';
+</script>
+<slot></slot>

examples/shadcn-svelte/src/app.pcss

@@ -12,6 +12,9 @@ const config = {
     // If your environment is not supported or you settled on a specific environment, switch out the adapter.
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter(),
+    alias: {
+      $lib: "./src/lib",
+    },
   },
 }
 

examples/shadcn-svelte/src/routes/+layout.svelte

@@ -0,0 +1,24 @@
+// unocss.config.ts
+import { defineConfig, presetUno } from "unocss"
+import presetAnimations from "unocss-preset-animations"
+import { presetShadcn } from "unocss-preset-shadcn"
+
+export default defineConfig({
+  presets: [
+    presetUno(),
+    presetAnimations(),
+    presetShadcn({
+      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)($|\?)/,
+      ],
+    },
+  },
+})

examples/shadcn-svelte/svelte.config.js

@@ -1,6 +1,14 @@
 import { sveltekit } from "@sveltejs/kit/vite"
+import extractorSvelte from "@unocss/extractor-svelte"
+import UnoCSS from "unocss/vite"
 import { defineConfig } from "vite"
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [
+    UnoCSS({
+      extractors: [extractorSvelte()],
+      /* more options */
+    }),
+    sveltekit(),
+  ],
 })