pandacn

shadcn/ui modeled as a Panda CSS 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

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 show every way to consume it.

Use it in a Panda app

Point Panda at the package in your panda.config.ts. It merges the tokens and recipes into your build.

import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  designSystem: 'pandacn',
  include: ['./app/**/*.{ts,tsx}'],
})

import { Button, Card } from 'pandacn'

Install the base presets alongside it:

pnpm add -D @pandacss/preset-base @pandacss/preset-panda

The recipes are built on Panda's default scales (h-9, text-sm, spacing). This design system's exported preset references @pandacss/preset-base (utility mappings and conditions) and @pandacss/preset-panda (the token values) by name, so a Panda app that consumes it needs both installed to resolve them. You don't list them in your presets — designSystem pulls them in. Apps that use the prebuilt styles.css (below) don't need them.

Use it without Panda

Import the prebuilt stylesheet and the components. No Panda, no config.

import 'pandacn/styles.css'
import { Button } from 'pandacn'

Dark mode

Class-based, like shadcn. Toggle .dark on <html> and the tokens flip.

Make it your own

The source is small and readable — fork it and change what you need.

• Rebrand it. Edit the color values in src/theme/semantic-tokens.ts (light + dark) and the radius scale in src/theme/tokens.ts. Every component picks up the change.
• Add a component. Add a recipe in src/theme/recipes.ts, register it in panda.config.ts, and add a thin wrapper in src/<name>/. Export it from src/index.ts.
• Rename the package. Change name in package.json; consumers point designSystem at the new name.

Run pnpm build to regenerate the styled-system, the panda lib artifacts, and the prebuilt stylesheet.

Components

Button, Badge, Card, Input, Textarea, Label, Alert, Separator, Avatar, Skeleton, Switch, Tabs.

Exports

| Entry | What it is | | ----------------------------------------- | ---------------------------------------------------- | | . | React components | | ./styles.css | Prebuilt stylesheet (tokens, recipes, every variant) | | ./panda/* | Machine artifacts for designSystem consumers | | ./css, ./recipes, ./tokens, ./jsx | Generated styled-system, for overlay re-exports |

See the example apps for all three consumption paths.