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

# Configure a Panda theme

Configure the semantic tokens, breakpoints, global rules, and generated utility surface of Brix's managed Panda CSS integration.

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.

## Use generated utilities

Import application-generated modules through `#brix/panda/*`:

```tsx
import { css } from "#brix/panda/css";

export function BookingCard() {
  return (
    <article
      class={css({
        display: "grid",
        gap: "4",
        padding: "6",
        borderRadius: "md",
      })}
    >
      Booking details
    </article>
  );
}

```

The generated and ignored `.brix/panda/` directory exposes:

- `#brix/panda/css`: `css`, `cx`, local `cva`, and local slot-based `sva`.
- `#brix/panda/recipes`: typed recipes and slot recipes registered by the theme.
- `#brix/panda/patterns`: function forms of built-in layouts such as `stack`.
- `#brix/panda/jsx`: Preact `styled` and generated pattern components with JSX style props.

Keep the generated `package.json` import mapping for `#brix/panda/*`. If output or types are
missing, run `brix dev`, `brix build`, or `brix doctor`; do not edit `.brix/panda`.

## Define the semantic theme

Add optional `src/theme.ts` with exactly one named runtime export, `theme`. Type-only exports are
allowed. Token leaves require `{ value }`, and semantic tokens should express product meaning rather
than copying palette names into components:

```ts
import { defineBrixTheme } from "brix/panda";

export const theme = defineBrixTheme({
  tokens: {
    colors: {
      brand: { value: "#0057b8" },
      canvas: { value: "#ffffff" },
      ink: { value: "#172033" },
    },
  },
  semanticTokens: {
    colors: {
      surface: { value: { base: "{colors.canvas}", _dark: "{colors.ink}" } },
      text: { value: { base: "{colors.ink}", _dark: "{colors.canvas}" } },
    },
  },
  breakpoints: { sm: "640px", md: "768px", lg: "1024px" },
  globalCss: {
    "html, body": { margin: "0", backgroundColor: "surface", color: "text" },
  },
});

```

Semantic references use braces. Keep breakpoint units consistent. Theme definitions may import
token modules; Brix watches those dependencies even when they are outside `src/`.

Responsive values use the generated breakpoint keys:

```tsx
const layout = css({
  display: { base: "block", md: "grid" },
  gridTemplateColumns: { md: "repeat(2, minmax(0, 1fr))" },
  gap: { base: "2", lg: "6" },
});

```

Continue with [style components with managed panda](/docs/styling-components).