> [Agent navigation index](/llms.txt)

# 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](/docs/react) for their supported styling boundary.

## Choose recipes and slots

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

```tsx
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`:

```ts
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.

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

```

See [testing](/docs/testing) for browser tests and [islands](/docs/islands) for the Preact hydration
boundary that generated JSX targets.