Bamboo is build-time, type-safe CSS-in-JS —
the scaffolding comes down before you ship.

Why Bamboo?

Bamboo CSS is a fork of Panda CSS with a smaller API and leaner output. css, cva, sva, cx, patterns and recipes carry over, so migrating is mostly a rename.

No JSX factory, no template literals, no style props: every class name comes from a call the compiler can see, so a production build can fold it into the string it would have returned:

// you write
<div className={css({ fontSize: 'lg', fontWeight: 'bold' })}>Title</div>

// the bundle gets
<div className="fs_lg fw_bold">Title</div>

Features

• ⚡️ Write style objects or style props, extract them at build time
• 🪶 Optional zero runtime – fold static css() calls and JSX into plain class strings at build time
• ✨ Modern CSS output – cascade layers @layer, css variables and more
• ✂️ Prune unused tokens and keyframes – ship only what your app uses
• 📦 Grouped class output – one class per css() call instead of one per property
• 🎯 Predictable overrides – cx resolves conflicting utilities, so the last one passed wins instead of whichever the stylesheet ordered last
• 🛟 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
• 🦄 Works with most JavaScript frameworks
• 🚀 Recipes and Variants – composable style variants, an API inspired by Stitches
• 🎨 High-level design tokens support for simultaneous themes
• 💪 Type-safe styles and autocomplete (via codegen)
• 🤖 MCP server – let AI assistants read your tokens, recipes and usage

---

Install

Install the CLI:

npm i -D @bamboocss/dev

To scaffold the bamboo config and postcss

npx bamboo init -p

Setup and import the entry CSS file

@layer reset, base, tokens, recipes, utilities;

import 'path/to/entry.css'

Start the dev server of your project

npm run dev

Start using bamboo

import { css } from '../styled-system/css'
import { stack, vstack, hstack } from '../styled-system/patterns'

function Example() {
  return (
    <div>
      <div className={hstack({ gap: '30px', color: 'pink.300' })}>Box 1</div>
      <div className={css({ fontSize: 'lg', color: 'red.400' })}>Box 2</div>
    </div>
  )
}

Directory Structure

Package	Description
cli	CLI package installed by the end user
core	Contains core features of Bamboo (utility, recipes, etc)
config	Contains functions for reading and merging the bamboo config
extractor	Contains code for fast AST parsing and scanning
generator	Contains codegen artifacts (js, css, jsx)
parser	Contains code for parsing a source code
is-valid-prop	Contains code for checking if a prop is a valid css prop
node	Contains the Node.js API of Bamboo's features
token-dictionary	Contains code used to process tokens and semantic tokens
shared	Contains shared TS functions

Contributing

See the contributing guide. The docs site lives in website/content/docs.

Acknowledgement

Bamboo CSS started as a fork of Panda CSS.