Panda Examples

A collection of example projects showcasing Panda CSS usage across different frameworks and setups.

Structure

Each example under examples/ is a standalone project with its own package.json and dependencies pinned to real, published versions (never workspace:*). Examples are intentionally not part of a pnpm workspace, so you can copy any single one out of this repo and it will install and run on its own — just like vercel/next.js/examples.

examples/
  <example-name>/
    package.json
    ...

Examples

Design system on Panda

Three ways to ship and consume one design system — shadcn/ui modeled in Panda. Same tokens, same components, different delivery.

Example	You get	Use it when
monorepo	The design system and a Next.js app in one pnpm + Turborepo workspace, wired with designSystem.	You build the system and the app together.
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	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 and is published to npm as pandacn. The monorepo example consumes it via the workspace; standalone-app and panda-app install it from npm.

Using an Example

You don't need to clone the whole repo. Grab a single example with degit:

npx degit chakra-ui/panda-examples/examples/<example-name> my-app
cd my-app
pnpm install
pnpm dev

Or clone the full repo and cd into the example you want:

git clone https://github.com/chakra-ui/panda-examples.git
cd panda-examples/examples/<example-name>
pnpm install
pnpm dev

Adding a New Example

1. Create a new directory under examples/ with its own package.json, pinned dependencies (no workspace:*), and a .gitignore.
2. Include dev/build scripts following the conventions of the other examples.
3. Add a short README.md inside the example explaining what it demonstrates.
4. Run pnpm run check-examples from the repo root to verify the example installs and builds in isolation.

License

MIT