feat: publish the design system to npm as pandacn

.github/workflows/publish.yml

@@ -0,0 +1,29 @@
+name: Publish pandacn
+
+on:
+  workflow_dispatch:
+  push:
+    tags: ['pandacn-v*']
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install
+        run: pnpm install
+        working-directory: examples/monorepo
+
+      - name: Publish
+        run: pnpm publish --no-git-checks --access public
+        working-directory: examples/monorepo/packages/ds
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -5,5 +5,3 @@ dist
 styled-system
 *.log
 .DS_Store
-
-.ds-tarball/

AGENTS.md

@@ -4,7 +4,7 @@ Panda CSS examples. Each folder under `examples/` is a standalone project you ca
 
 ## Layout
 
-- `examples/monorepo` — the design system (`packages/ds` = `@chakra-ui/shadcn-panda`) + a Next.js app, in a pnpm + Turborepo workspace.
+- `examples/monorepo` — the design system (`packages/ds` = `pandacn`) + a Next.js app, in a pnpm + Turborepo workspace.
 - `examples/standalone-app` — a Next.js app that consumes the published design system as prebuilt CSS + components, no Panda.
 - `examples/panda-app` — a Next.js app that runs Panda and consumes the design system via `designSystem`.
 
@@ -27,4 +27,4 @@ pnpm run check-examples  # install + build every example standalone
 pnpm install && pnpm dev
 ```
 
-`@chakra-ui/shadcn-panda` is not published to npm. `standalone-app` and `panda-app` bundle it as a tarball (`chakra-ui-shadcn-panda-0.1.0.tgz`) and install it with a `file:` dependency, so they work offline and stay degit-able. Run `pnpm run pack-ds` to rebuild the tarballs after changing the design system.
+The design system is published to npm as `pandacn`; its source is `examples/monorepo/packages/ds`. The `monorepo` example consumes it via `workspace:*`; `standalone-app` and `panda-app` install it from npm. Publishing runs from the `Publish pandacn` GitHub Action (or `pnpm -C examples/monorepo/packages/ds publish`).

CONTRIBUTING.md

@@ -31,7 +31,7 @@ pnpm dev
 
 Every folder under `examples/` is its own project with pinned dependencies — no `workspace:*` (except the `monorepo` example, which is itself a workspace). You can copy any example out of the repo and it runs on its own.
 
-The shadcn design system lives in `examples/monorepo/packages/ds`. It isn't published to npm — the `standalone-app` and `panda-app` examples bundle it as a tarball and install it with a `file:` dependency. Run `pnpm run pack-ds` to rebuild the tarballs after changing the design system.
+The shadcn design system lives in `examples/monorepo/packages/ds` and is published to npm as [`pandacn`](https://npmx.dev/pandacn). The `monorepo` example consumes it via `workspace:*`; the `standalone-app` and `panda-app` examples install it from npm.
 
 ## Tooling
 

README.md

@@ -27,9 +27,7 @@ Three ways to ship and consume one design system — [shadcn/ui](https://ui.shad
 | [`standalone-app`](examples/standalone-app) | A Next.js app with **no Panda installed** — it imports the published CSS and React components.            | A team wants the components without running Panda. |
 | [`panda-app`](examples/panda-app)           | A Next.js app that runs Panda, pulls the published system through `designSystem`, and extends its tokens. | Your app uses Panda and builds on the system.      |
 
-The design system itself lives at [`examples/monorepo/packages/ds`](examples/monorepo/packages/ds) as the `@chakra-ui/shadcn-panda` package. It isn't published to npm — the `standalone-app` and `panda-app` examples each **bundle it as a tarball**, so they install offline with no registry, exactly like consuming a published package.
-
-> After changing the design system, run `pnpm run pack-ds` to rebuild the bundled tarballs.
+The design system itself lives at [`examples/monorepo/packages/ds`](examples/monorepo/packages/ds) and is published to npm as [`pandacn`](https://npmx.dev/pandacn). The `monorepo` example consumes it via the workspace; `standalone-app` and `panda-app` install it from npm.
 
 ## Using an Example
 

examples/monorepo/README.md

@@ -4,10 +4,12 @@ A [shadcn/ui](https://ui.shadcn.com/) design system built on **Panda CSS**, cons
 
 This is the "decide once, use everywhere" setup: the design system is a workspace package, and the app pulls it in through Panda's `designSystem` config. No copy-pasted components, no re-declared tokens.
 
+**The design system's source lives in [`packages/ds`](packages/ds).** That's the `pandacn` package — the same one the [`standalone-app`](../standalone-app) and [`panda-app`](../panda-app) examples consume. If you're wondering where those imports come from, it's here.
+
 ```
-design-system-monorepo/
+monorepo/
 ├─ packages/
-│  └─ ds/          @chakra-ui/shadcn-panda — tokens, recipes, React components
+│  └─ ds/          pandacn — the design system: tokens, recipes, React components
 └─ apps/
    └─ web/         Next.js App Router app that consumes the DS
 ```
@@ -20,13 +22,12 @@ design-system-monorepo/
 - `src/<component>/` — thin React wrappers over the generated recipes.
 - `panda lib` emits `dist/panda/lib.json` + a preset and syncs `package.json` exports.
 
-**`apps/web`** consumes it in one line:
+**`apps/web`** consumes it through its `panda.config.ts`:
 
 ```ts
-// apps/web/panda.config.ts
 export default defineConfig({
-  designSystem: '@chakra-ui/shadcn-panda',
-  // ...
+  designSystem: 'pandacn',
+  include: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
 })
 ```
 

examples/monorepo/apps/web/components/showcase-gallery.tsx

@@ -22,7 +22,7 @@ import {
   TabsList,
   TabsTrigger,
   TabsContent,
-} from '@chakra-ui/shadcn-panda'
+} from 'pandacn'
 import { css, cx } from '../styled-system/css'
 import { container, sectionCard, sectionLabel, row } from '../lib/frame'
 

examples/monorepo/apps/web/components/theme-toggle.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useSyncExternalStore } from 'react'
-import { Switch } from '@chakra-ui/shadcn-panda'
+import { Switch } from 'pandacn'
 import { css } from '../styled-system/css'
 
 function subscribe(callback: () => void) {

examples/monorepo/apps/web/next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
-  transpilePackages: ['@chakra-ui/shadcn-panda'],
+  transpilePackages: ['pandacn'],
 }
 
 export default nextConfig

examples/monorepo/apps/web/package.json

@@ -12,8 +12,8 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "@chakra-ui/shadcn-panda": "workspace:*",
     "next": "16.3.0",
+    "pandacn": "workspace:*",
     "react": "19.2.0",
     "react-dom": "19.2.0"
   },

examples/monorepo/apps/web/panda.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
-  designSystem: '@chakra-ui/shadcn-panda',
+  designSystem: 'pandacn',
   include: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './lib/**/*.{ts,tsx}'],
   outdir: 'styled-system',
   jsxFramework: 'react',

examples/monorepo/packages/ds/README.md

@@ -1,12 +1,16 @@
-# @chakra-ui/shadcn-panda
+# pandacn
 
 [shadcn/ui](https://ui.shadcn.com/) modeled as a [Panda CSS](https://panda-css.com) design system. Same components, same look, built at build time instead of shipped as source you paste in.
 
 You get shadcn's tokens and components as a real package: semantic tokens with light and dark, recipes ported from shadcn's `cva` definitions, and thin React wrappers. Ship it once with `panda lib`; apps consume it through `designSystem` or as a prebuilt CSS file.
 
 ## Getting it
 
-This package isn't on npm. The [example apps](https://github.com/chakra-ui/panda-examples) bundle it as a tarball built with `panda lib`, so they install it offline with a `file:` dependency. Copy `packages/ds` into your own repo to make it yours, or run `pnpm pack` here to produce the tarball your apps install.
+```bash
+pnpm add pandacn
+```
+
+The source lives in this repo at `examples/monorepo/packages/ds` — copy it into your own repo to make it yours. The [example apps](https://github.com/chakra-ui/panda-examples) show every way to consume it.
 
 ## Use it in a Panda app
 
@@ -16,13 +20,13 @@ Point Panda at the package in your `panda.config.ts`. It merges the tokens and r
 import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
-  designSystem: '@chakra-ui/shadcn-panda',
+  designSystem: 'pandacn',
   include: ['./app/**/*.{ts,tsx}'],
 })
 ```
 
 ```tsx
-import { Button, Card } from '@chakra-ui/shadcn-panda'
+import { Button, Card } from 'pandacn'
 ```
 
 Install the base presets alongside it:
@@ -38,8 +42,8 @@ The recipes are built on Panda's default scales (`h-9`, `text-sm`, spacing). Thi
 Import the prebuilt stylesheet and the components. No Panda, no config.
 
 ```tsx
-import '@chakra-ui/shadcn-panda/styles.css'
-import { Button } from '@chakra-ui/shadcn-panda'
+import 'pandacn/styles.css'
+import { Button } from 'pandacn'
 ```
 
 ## Dark mode

examples/monorepo/packages/ds/package.json

@@ -1,8 +1,20 @@
 {
-  "name": "@chakra-ui/shadcn-panda",
+  "name": "pandacn",
   "version": "0.1.0",
   "description": "shadcn/ui modeled as a Panda CSS design system, shipped with `panda lib`.",
+  "keywords": [
+    "design-system",
+    "panda-css",
+    "react",
+    "shadcn"
+  ],
+  "homepage": "https://github.com/chakra-ui/panda-examples/tree/main/examples/monorepo/packages/ds",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/panda-examples.git",
+    "directory": "examples/monorepo/packages/ds"
+  },
   "files": [
     "dist",
     "styled-system",
@@ -57,6 +69,9 @@
       "default": "./styled-system/helpers.js"
     }
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "codegen": "panda codegen",
     "lib": "panda codegen && panda lib",

examples/panda-app/README.md

@@ -6,13 +6,12 @@ Use this when your app already uses Panda and you want to build on a shared desi
 
 ## How it works
 
-Point Panda at the published design system:
+Point Panda at the published design system in your `panda.config.ts`:
 
 ```ts
-// panda.config.ts
 export default defineConfig({
-  designSystem: '@chakra-ui/shadcn-panda',
-  // ...
+  designSystem: 'pandacn',
+  include: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
 })
 ```
 
@@ -47,6 +46,4 @@ pnpm dev
 
 ## The design system
 
-`@chakra-ui/shadcn-panda` isn't on npm. This example bundles it as a tarball (`chakra-ui-shadcn-panda-0.1.0.tgz`) and installs it with `file:`, so `pnpm install` works offline — the same as consuming a published package. `designSystem` resolves it from there.
-
-Inside this repo, run `pnpm run pack-ds` from the root after changing the design system to rebuild the tarball.
+The design system is the [`pandacn`](https://npmx.dev/pandacn) package, installed from npm. Its source lives in [`examples/monorepo/packages/ds`](../monorepo/packages/ds). `designSystem: 'pandacn'` in `panda.config.ts` pulls its tokens and recipes into this app's build.

examples/panda-app/components/showcase-gallery.tsx

@@ -22,7 +22,7 @@ import {
   TabsList,
   TabsTrigger,
   TabsContent,
-} from '@chakra-ui/shadcn-panda'
+} from 'pandacn'
 import { css, cx } from '../styled-system/css'
 import { container, sectionCard, sectionLabel, row } from '../lib/frame'
 

examples/panda-app/components/theme-toggle.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useSyncExternalStore } from 'react'
-import { Switch } from '@chakra-ui/shadcn-panda'
+import { Switch } from 'pandacn'
 import { css } from '../styled-system/css'
 
 function subscribe(callback: () => void) {

examples/panda-app/next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from 'next'
 
 const nextConfig: NextConfig = {
-  transpilePackages: ['@chakra-ui/shadcn-panda'],
+  transpilePackages: ['pandacn'],
 }
 
 export default nextConfig

examples/panda-app/package.json

@@ -14,8 +14,8 @@
     "format:check": "oxfmt --check ."
   },
   "dependencies": {
-    "@chakra-ui/shadcn-panda": "file:./chakra-ui-shadcn-panda-0.1.0.tgz",
     "next": "16.3.0",
+    "pandacn": "^0.1.0",
     "react": "19.2.0",
     "react-dom": "19.2.0"
   },

examples/panda-app/panda.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from '@pandacss/dev'
 
 export default defineConfig({
-  designSystem: '@chakra-ui/shadcn-panda',
+  designSystem: 'pandacn',
   include: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './lib/**/*.{ts,tsx}'],
   outdir: 'styled-system',
   jsxFramework: 'react',