next: Tailwind v4

.changeset/sixty-lizards-end.md

@@ -0,0 +1,5 @@
+---
+"shadcn-svelte": patch
+---
+
+breaking: svelte 5 + tailwindcss v4

.github/workflows/ci.yml

@@ -58,5 +58,8 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build packages
+        run: pnpm build:cli
+
       - name: Run tests
         run: pnpm -F shadcn-svelte test

.github/workflows/deploy-tailwind-3.yml

@@ -0,0 +1,50 @@
+name: Tailwind 3 Deployment
+on:
+  push:
+    branches:
+      - next-tailwind-3
+    paths:
+      - sites/docs/**
+  workflow_dispatch:
+
+
+jobs:
+  deploy-production:
+    runs-on: macos-latest
+    permissions:
+      contents: read
+      deployments: write
+    name: Deploy Production Site to Cloudflare Pages
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      # Image cache setup
+      - name: Setup Image cache
+        uses: actions/cache@v4
+        with:
+          path: "**/node_modules/.cache/imagetools"
+          key: ${{ runner.os }}-image-cache-${{ hashFiles('**/src/lib/img') }}
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Build site
+        env:
+          NODE_OPTIONS: --max-old-space-size=8192
+        run: pnpm build
+
+      - name: Deploy to Cloudflare Pages
+        uses: AdrianGonz97/refined-cf-pages-action@v1
+        with:
+          apiToken: ${{ secrets.CF_API_TOKEN }}
+          accountId: ${{ secrets.CF_ACCOUNT_ID }}
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          projectName: shadcn-svelte-tw-3
+          directory: ./.svelte-kit/cloudflare
+          workingDirectory: sites/docs
+          deploymentName: Production Tailwind 3

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+dist
 /build
 /.svelte-kit
 /package
@@ -103,16 +104,23 @@ web_modules/
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
-packages/cli/dist
-dist/
-dist
 generated-assets
 
 # JetBrains IDEs
 .idea/
 
 .velite
 sites/docs/static/registry
-sites/docs/src/lib/registry-json/**/*.json
-sites/docs/src/lib/registry-json/**/*.css
-sites/docs/static/themes.css
+sites/docs/static/themes.css
+sites/docs/static/schema/registry.json
+sites/docs/static/schema/registry-item.json
+sites/docs/src/__registry__/json
+
+v4/static/registry
+v4/static/themes.css
+v4/src/__registry__
+v4/static/schema/registry.json
+v4/static/schema/registry-item.json
+
+
+registry-template/static/r

.nvmrc

@@ -1 +1 @@
-v20.15.1
+v22.15.0

.prettierignore

@@ -25,6 +25,7 @@ sites/docs/other/themes/light.json
 sites/docs/static
 sites/docs/.velite
 sites/docs/src/__registry__
+v4/src/__registry__
 packages/cli/test/fixtures
 playgrounds
 .svelte-kit

eslint.config.js

@@ -1,10 +1,15 @@
+import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
+import { includeIgnoreFile } from "@eslint/compat";
 import prettier from "eslint-config-prettier";
 import svelte from "eslint-plugin-svelte";
 import globals from "globals";
 import ts from "typescript-eslint";
 
+const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url));
+
 export default ts.config(
+	includeIgnoreFile(gitignorePath),
 	js.configs.recommended,
 	...ts.configs.recommended,
 	...svelte.configs["flat/recommended"],

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "shadcn-svelte",
+	"name": "@shadcn-svelte/monorepo",
 	"version": "0.0.1",
 	"description": "monorepo for shadcn-svelte",
 	"author": {
@@ -9,17 +9,20 @@
 	"private": true,
 	"scripts": {
 		"build": "pnpm build:docs",
-		"build:cli": "pnpm -F shadcn-svelte build",
+		"build:cli": "pnpm -r -F \"./packages/**\" build",
 		"build:docs": "pnpm -F docs build",
+		"build:v4": "pnpm -F v4 build",
 		"dev": "pnpm -F docs dev",
-		"dev:cli": "pnpm -F shadcn-svelte start:dev",
+		"dev:cli": "pnpm -F \"./packages/**\" svelte-kit sync && pnpm --parallel --reporter append-only --color dev",
+		"dev:v4": "pnpm -F v4 dev",
 		"preview": "pnpm -F docs preview",
 		"test": "pnpm -F shadcn-svelte test",
-		"check": "pnpm -F docs check",
+		"build:registry-template": "pnpm build:cli && pnpm -F registry-template build:registry",
+		"check": "pnpm -F docs check && pnpm -F \"./packages/**\" check",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
 		"preinstall": "npx only-allow pnpm",
-		"postinstall": "pnpm -r sync",
+		"postinstall": "pnpm -r sync && pnpm build:cli",
 		"ci:publish": "changeset publish",
 		"ci:build": "pnpm build:cli",
 		"ci:release": "pnpm ci:build && pnpm ci:publish"
@@ -37,20 +40,28 @@
 	"type": "module",
 	"devDependencies": {
 		"@changesets/cli": "^2.28.1",
+		"@eslint/compat": "^1.2.7",
 		"@eslint/js": "^9.22.0",
+		"@types/node": "^22.15.15",
 		"@typescript-eslint/eslint-plugin": "^8.26.1",
 		"@typescript-eslint/scope-manager": "^8.26.1",
 		"@typescript-eslint/utils": "^8.26.1",
 		"eslint": "^9.22.0",
 		"eslint-config-prettier": "^10.1.1",
 		"eslint-plugin-svelte": "^3.2.1",
 		"globals": "^16.0.0",
+		"minimatch": "^10.0.1",
 		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"pretty-quick": "^4.1.1",
 		"svelte": "^5.23.1",
-		"typescript": "^5.8.2",
+		"typescript": "^5.8.3",
 		"typescript-eslint": "^8.26.1"
+	},
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"esbuild"
+		]
 	}
 }

packages/cli/README.md

@@ -6,7 +6,7 @@ A CLI for adding shadcn components to your project.
 
 Use the `init` command to initialize dependencies for a new project.
 
-The `init` command installs dependencies, adds the `cn` util, configures `tailwind.config.cjs`, and sets up CSS variables for the project.
+The `init` command installs dependencies, adds the `cn` util, configures, and sets up CSS variables for the project.
 
 ```bash
 npx shadcn-svelte init

packages/cli/__mocks__/fs.cjs

@@ -0,0 +1,5 @@
+// we can also use `import`, but then
+// every export should be explicitly defined
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const { fs } = require("memfs");
+module.exports = fs;

packages/cli/__mocks__/fs/promises.cjs

@@ -0,0 +1,5 @@
+// we can also use `import`, but then
+// every export should be explicitly defined
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const { fs } = require("memfs");
+module.exports = fs.promises;

packages/cli/package.json

@@ -34,30 +34,36 @@
 		"start": "node dist/index.js",
 		"start:dev": "cross-env COMPONENTS_REGISTRY_URL=http://localhost:5173/registry node dist/index.js",
 		"start:proxy": "pnpm dlx straightforward@latest --port 9000",
-		"release": "changeset version",
-		"test": "vitest"
+		"test": "pnpm -w build:registry-template && vitest"
 	},
 	"dependencies": {
-		"@clack/core": "^0.3.4",
-		"chalk": "5.2.0",
-		"commander": "^10.0.1",
-		"execa": "^7.2.0",
-		"is-unicode-supported": "^2.0.0",
+		"commander": "^13.1.0",
 		"node-fetch-native": "^1.6.4",
-		"semver": "^7.7.1"
+		"postcss": "^8.4.39"
 	},
 	"devDependencies": {
+		"@clack/prompts": "^1.0.0-alpha.0",
+		"@shadcn-svelte/registry": "workspace:*",
+		"@svecosystem/strip-types": "^0.0.2",
+		"@sveltejs/acorn-typescript": "^1.0.5",
 		"@types/node": "^18.19.22",
 		"@types/semver": "^7.5.8",
+		"acorn": "^8.13.0",
+		"chalk": "^5.4.0",
 		"cross-env": "^7.0.3",
+		"deepmerge": "^4.3.1",
+		"estree-walker": "^3.0.3",
 		"get-tsconfig": "^4.7.3",
-		"ignore": "^5.3.1",
-		"package-manager-detector": "^0.2.2",
-		"sisteransi": "^1.0.5",
-		"tsup": "^8.0.0",
+		"ignore": "^7.0.4",
+		"memfs": "^4.17.2",
+		"package-manager-detector": "^1.2.0",
+		"semver": "^7.7.1",
+		"sucrase": "^3.35.0",
+		"tinyexec": "^1.0.1",
+		"tsup": "^8.4.0",
 		"type-fest": "^3.13.1",
-		"typescript": "^5.0.0",
-		"valibot": "^0.36.0",
-		"vitest": "^0.34.6"
+		"typescript": "^5.8.3",
+		"vitest": "^3.1.3",
+		"zod": "3.25.0-beta.20250516T005923"
 	}
 }