Installation
The system is a Panda CSS design system. Install it, point your Panda config at it, and import components from the Svelte entry.
Install
Panda runs as a dev dependency in your app; the design system and Panda must share the same major version.
sh
bun add @milandekruijf/ui
bun add -d @pandacss/dev@^2Point Panda at it
One field loads the theme, the recipes, and the styles the package already extracted. Don't add the package to include.
ts
import { defineConfig } from "@pandacss/dev";
export default defineConfig({
designSystem: "@milandekruijf/ui",
include: ["src/**/*.{ts,svelte}"],
outdir: "styled-system",
});Use components
Components are tree-shakeable and can also be imported one by one from their own file.
ts
import { Button, Badge } from "@milandekruijf/ui/svelte";Entry CSS
Keep one stylesheet that declares the cascade layer order. The Panda bundler plugin injects the generated CSS into it.
css
@layer reset, base, tokens, recipes, utilities;Dark mode
Dark values follow a .dark class on the html element, for example through mode-watcher.
Extending the theme
Add tokens under theme.extend in your own config. Your value wins and Panda reports the conflict.
ts
export default defineConfig({
designSystem: "@milandekruijf/ui",
theme: {
extend: {
tokens: { spacing: { 6: { value: "1.5rem" } } },
},
},
});