Stalk UI

Getting started

Customization

Theme, override recipes, and tune surfaces — without forking component source.

Overview

Customize Stalk at three levels — full themes via defineTheme, recipe overrides in your panda.config, and per-instance props or tokens. Try the interactive card and theme builder below.

Themes. @stalk-ui/preset/theme exports defineTheme, which generates the entire semantic surface (background, foreground, border, accent, status, highlight) from a couple of Radix scale names. Register the result under themes in panda.config.ts, add it to staticCss.themes, and apply it with the data-panda-theme attribute.

Recipe overrides. Adjust any Stalk recipe from your own panda.config.ts with theme.extend. Slot recipes (Card, Select, Tabs, Table) extend under theme.extend.slotRecipes.<name>; single-element recipes (Button, Badge) under theme.extend.recipes.<name>. For example, set theme.extend.recipes.button.defaultVariants to make outline / sm your app default — Stalk’s internal components pin their variants explicitly, so they are unaffected.

Elevation. The model is page = bg.canvas, surfaces = bg.default: bg.canvas sits one step under bg.default, so raised surfaces read as elevated. Set your page background to bg.canvas and cards on the default bg.default pop automatically; if your page must stay bg.default, reach for <Card variant="elevated"> instead of overriding the card recipe’s base background.

Customize a card

Pick an accent and edit the title — the card rethemes live, and the same accent flows straight into defineTheme.

Project settings

Group related content and actions on a single bordered surface.

SaveCancel

defineTheme

import { defineTheme } from '@stalk-ui/preset/theme'

themes: {
  brand: defineTheme({ accent: 'teal' }),
}

Builder output

See how the theme builder choices turn into profile, config, and static CSS work.

Choose scales

{
  "accent": "teal",
  "gray": "slate",
  "roundness": "default"
}

Apply

data-panda-themeUse the generated name as the theme attribute.data-panda-theme="brand"

Theme builder

Pick scales below to design a completely custom theme. The preview rethemes live in both color modes; copy the generated defineTheme config straight into panda.config.ts, or the portable JSON profile.

Core
Accent
Gray
Roundness
Elevation
Font
Vibrant
Status tones (any hue)
Success
Warning
Danger
Info
Highlight
Data-viz ramps
Sequential
Diverging (low)
Diverging (high)
Light
LivePendingErrorInfoNew
Sequential ramp
Diverging ramp

Elevated card

Surfaces, accents, radius, shadow, and font all retheme live.

Dark
LivePendingErrorInfoNew
Sequential ramp
Diverging ramp

Elevated card

Surfaces, accents, radius, shadow, and font all retheme live.

panda.config.ts
import { defineConfig } from '@pandacss/dev'
import { defineTheme } from '@stalk-ui/preset/theme'

export default defineConfig({
  preflight: true,
  presets: ['@stalk-ui/preset'],
  themes: {
    custom: defineTheme({
        accent: 'teal',
        gray: 'slate',
    }),
  },
  staticCss: { themes: ['custom'] },
})
theme profile (JSON)
{
  "accent": "teal",
  "gray": "slate",
  "vibrant": false,
  "roundness": "default",
  "elevation": "soft",
  "font": "System (default)",
  "success": "emerald",
  "warning": "amber",
  "danger": "red",
  "info": "blue",
  "highlight": "orange",
  "sequential": "teal",
  "divergingNeg": "red",
  "divergingPos": "blue"
}

Built-in scales use the typed `defineTheme` shorthand; custom-scale tones emit their Radix scale into your own config, so the preset stays lean. The JSON profile is the portable, CLI-installable description.