Style components with managed Panda

Style Preact components with local or shared recipes, slots, patterns, responsive values, and statically extractable CSS.

React applications are a separate browser-only project kind and do not use this managed Panda surface. See React applications for their supported styling boundary.

Choose recipes and slots

Use cva from #brix/panda/css when one component owns the variants:

import { cva } from "#brix/panda/css";

const badge = cva({
  base: { borderRadius: "sm", paddingX: "2", paddingY: "1" },
  variants: {
    tone: {
      info: { backgroundColor: "blue.100", color: "blue.900" },
      danger: { backgroundColor: "red.100", color: "red.900" },
    },
  },
  defaultVariants: { tone: "info" },
});

Use local sva for a multipart component whose root, label, and control need coordinated variants. For design-system variants shared across modules, declare recipes or slotRecipes in theme and import their generated typed functions from #brix/panda/recipes. A slot recipe returns one class for each named slot, preventing variant logic from drifting between child elements.

Use function patterns from #brix/panda/patterns for layout intent. Generated components from #brix/panda/jsx, such as Stack, are useful when JSX style props clarify structure; prefer css, recipes, and patterns for ordinary components.

Understand extraction and static CSS

Panda extracts statically visible declarations and recipe variants. Avoid computed property names or runtime-generated style objects that extraction cannot see. If runtime data selects from a finite set, declare only that set with top-level staticCss:

export const theme = defineBrixTheme({
  staticCss: {
    css: [{ properties: { display: ["none", "block", "flex"] }, responsive: true }],
    recipes: { button: [{ visual: ["solid", "outline"] }] },
  },
});

Broad wildcards increase output size. Reserve globalCss for genuine document-wide rules and keep component styles colocated.

During brix dev, Brix retains an extraction context and re-extracts changed files only. Added and deleted files update CSS. Theme or imported-theme changes rebuild generated utilities; rapid edits share pending generation work. Unchanged source does not rewrite CSS or utility types.

The supported extension surface is tokens, semantic tokens, breakpoints, recipes, slot recipes, global CSS, and static CSS. Custom utilities, conditions, patterns, presets, or generators require a platform capability rather than a hidden Panda configuration. An application that deliberately owns no Panda styling may set panda: false in defineBrixConfig.

Test and verify

Exercise representative recipe variants, responsive breakpoints, focus and disabled states in browser tests. Use Storybook interaction and accessibility tests when components live in a catalog.

brix doctor
brix check
brix test --project browser
brix build

See testing for browser tests and islands for the Preact hydration boundary that generated JSX targets.