Get started with Bamboo

The universal design system solution for the web

Bamboo is a styling engine that generates styling primitives to author atomic CSS and recipes in a type-safe and readable manner.

Bamboo combines the developer experience of CSS-in-JS and the performance of atomic CSS. It leverages static analysis to scan your JavaScript and TypeScript files for JSX style props and function calls, generating styles on-demand (aka Just-in-Time)

💡

TLDR; Bamboo is a CSS-in-JS engine that generates atomic CSS at build time (via CLI or PostCSS)

How is this different from Panda CSS?

Bamboo CSS is a fork of Panda CSS (opens in a new tab) v1, so the styling API is identical and migrating is mostly a rename. What has changed since the fork is what reaches the browser and what it costs:

Less CSS — pruneUnusedTokens drops token variables nothing can reach, taking styles.css from 24.4 KB to 12.3 KB on our own sandbox.
Less JavaScript — the generated output declares sideEffects and stops emitting the JSX property list twice, so a barrel import falls from 41.2 KB to 30.1 KB minified.
A faster runtime — repeated css() calls are roughly 4-5x faster, and the class-name cache is bounded rather than growing for the life of the process, which used to leak under long-lived SSR.
Optional zero runtime — @bamboocss/vite folds statically-resolvable css() calls into plain class strings at build time.
Less HTML — cssMode: 'grouped' emits one class per css() call instead of one per property, trading CSS duplication for shorter class attributes and faster style recalculation.

Every figure is measured against this repository's own sandboxes; the output-size wins scale with the size of your design system rather than your app. The full comparison has the rest.

Installation

General Guides

Bamboo CLI: The simplest way to use Bamboo is with the Bamboo CLI tool.
Using PostCSS: (Recommended) Installing Bamboo as a PostCSS plugin is the recommended way to integrate it with your project.