Docs

Theming

Components use the standard shadcn CSS variables, so they take on your brand automatically. The Ballmac theme is optional.

Tokens components use

--background, --foreground, --card, --primary, --muted, --accent, --border, --input, --ring, --destructive, --chart-1 to --chart-5 and --radius. Change them in your globals.css and every Ballmac component follows.

Presets and the builder

The theme builder has twelve ready-made themes (Graphite, Ocean, Indigo, Violet, Rose, Ember, Amber, Forest, Teal, Sand, Mono and Midnight). Each one is a full set of light and dark tokens, with contrast checked for text, focus rings and charts. Install one by name, or tune hue, intensity, radius, density and font on a live preview and copy the result.

npx shadcn@latest add @ballmac/theme-ocean

Themes change the variables only. Installing a second theme replaces the first, and your components keep working because they read the same tokens.

Brand color in one line

Focus rings, selections and accents come from --ring and --chart-1:

app/globals.css

:root {
  --ring: oklch(0.62 0.19 262);
  --chart-1: oklch(0.62 0.19 262);
}

Motion tokens

The Ballmac theme adds --bm-ease-out, --bm-ease-in-out and --bm-duration-fast, -base, -slow. Animated components also import the same values from @ballmac/motion-presets, so CSS and Motion animations share one rhythm.

Dark mode

Components read tokens only, so dark mode is whatever your .dark class defines. With the Ballmac theme, dark mode is an ink navy rather than pure black.