Get started with Bamboo

Bamboo is build-time, type-safe, zero-runtime CSS-in-JS

Why Bamboo?

Bamboo's Vite integration compiles each style call into globally shared declaration atoms:

// you write
<div className={css({ fontSize: 'lg', fontWeight: 'bold' })}>Title</div>
const title = cva({ variants: { weight: { bold: { fontWeight: 'bold' }, normal: { fontWeight: 'normal' } } } })
<div className={title({ weight: active ? 'bold' : 'normal' })}>Title</div>
 
// the bundle gets
<div className="fs_lg fw_bold">Title</div>
<div className={cvaMap(/* finite precompiled class leaves */)}>Title</div>

Recipe names and files do not enter atom identity, so identical declarations from css(), cva(), sva(), and config recipes produce one CSS rule. Recipe declarations are erased, finite runtime variant choices become small decision tables, and any open runtime style value fails compilation. There is no runtime styling fallback to retain the engine.

Bamboo fails the build when a call names a pattern or token that does not exist:

ERR_BAMBOO_DEAD_IMPORT: 12 call(s) name a binding that does not exist:

`stack` is not a pattern — `../styled-system/patterns` does not export it.
  12 file(s): src/modal.tsx, src/drawer.tsx, src/sheet.tsx, … and 9 more

Bamboo prunes tokens, keyframes and reset rules that your application does not use. On the example apps in the repository that is 36–78% of styles.css — one goes from 18,032 bytes to 3,959.

Bamboo is used in production by Contra (opens in a new tab), whose UI has more than 20,000 css() call sites, and is covered by more than 3,000 tests.

Bamboo CSS is a fork of Panda CSS (opens in a new tab) with a smaller API and leaner output. css, cva, sva, cx, patterns and recipes carry over, so migrating is mostly a rename. A few things behave differently beyond the smaller surface — see why Bamboo and what changed.

How it works

Bamboo's Rust/Oxc extractor scans your configured source graph and Vite compiles its style calls, globally pools recipe and utility atoms, and prunes the stylesheet against the module graph. The CLI generates the typed styled-system authoring surface and can inspect or preassemble CSS; it is not a styling integration. PostCSS does not emit Bamboo CSS.

You author styles as plain objects. Tokens, recipes and variants are generated from your config as types, so the editor autocompletes them and the compiler checks them.

Features

📦 Per-route CSS – lazy chunks load their exclusive utilities with them
🔎 Development source maps – trace a rule to its first style call
✨ Modern CSS output – cascade layers (@layer) and custom properties
🎯 Predictable composition – analyzable style sets merge before class allocation; cascade layers still define precedence between Bamboo and authored CSS
🚀 Recipes and variants – composable style variants, an API inspired by Stitches
💪 Type-safe styles and autocomplete, generated from your config
🎨 Design tokens with simultaneous themes
🛟 Fallback values – fallback(100dvh, 100vh) for progressive enhancement, in one declaration
🎬 View transitions – viewTransition() writes the ::view-transition-* rules and hands back one class to share across elements
🤖 MCP server – AI assistants read your tokens, recipes and usage
🦄 Works with most JavaScript frameworks

Cheat Sheet

Every API on one page, with the class strings each call returns — see Cheat Sheet.

Installation

Check the build platform requirements before installing locally or configuring CI.

General Guides

Using Vite: the only styling integration. Compiles css() / cva() and serves virtual:bamboo.css.
Bamboo CLI: codegen for the styled-system directory. CSS still comes from the Vite plugin.