Design system

Installation

The design system is a Panda CSS preset with tokens, recipes and slot recipes. The components are Ark UI parts wired to those recipes, copied into your project so you own the code.

Install the packages

Add the design system and Ark UI, and Panda CSS as a dev dependency.

pnpm add @isbatak/panda-ds @ark-ui/react
pnpm add -D @pandacss/dev

Configure Panda

Point designSystem at the package in panda.config.ts. Set colorPalette on html to pick the accent every component uses.

panda.config.ts
import { defineConfig } from "@pandacss/dev"

export default defineConfig({
  designSystem: "@isbatak/panda-ds",
  preflight: true,
  jsxFramework: "react",
  include: ["./src/**/*.{ts,tsx}"],
  globalCss: {
    extend: {
      html: { colorPalette: "orange" },
    },
  },
})

Add components

Copy the components you need from packages/ui/react into your project. Each one imports its recipe from @isbatak/panda-ds/recipes, so it picks up your theme with no extra setup. Vue, Solid and Svelte versions live next to it under packages/ui.

save.tsx
import { Button } from "./components/ui/button"

export function Save() {
  return <Button variant="solid">Save changes</Button>
}

Choose a radius

Corners follow a radius preset: none, xs, sm, md, lg, xl or 2xl. Set it with data-radius on any element, and everything inside follows. Without it, components use sm.

layout
<html data-radius="md">
Browse components