---
title: Get started with Bamboo
description: Bamboo is build-time, type-safe, zero-runtime CSS-in-JS
---

## Why Bamboo?

Bamboo's Vite integration [compiles](/docs/guides/source-transformation) each style call into globally shared
declaration atoms:

```tsx
// 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](/docs/concepts/build-diagnostics) 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](/docs/references/config#prune) 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](https://contra.com), 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](https://panda-css.com/) with a smaller API and leaner output. `css`, `cva`, `sva`,
`cx`, patterns and recipes carry over, so [migrating](/docs/migration/panda) is mostly a rename. A few things behave
differently beyond the smaller surface — see [why Bamboo](/docs/overview/why-bamboo) and
[what changed](/docs/overview/faq#how-is-bamboo-css-different-from-panda-css).

## How it works

Bamboo scans your JavaScript and TypeScript for style function calls and generates CSS for the call sites it finds. The
Vite integration additionally compiles those calls, globally pools recipe and utility atoms, and prunes against the
module graph. CLI and PostCSS are extraction-only integrations.

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

- ✨ Modern CSS output – cascade layers (`@layer`) and custom properties
- 🎯 [Predictable composition](/docs/concepts/cascade-layers) – analyzable style sets merge before class allocation;
  cascade layers still define precedence between Bamboo and authored CSS
- 🚀 [Recipes and variants](/docs/concepts/recipes) – composable style variants, an API inspired by Stitches
- 💪 Type-safe styles and autocomplete, generated from your config
- 🎨 Design tokens with simultaneous themes
- 🛟 [Fallback values](/docs/concepts/writing-styles#fallback-values) – `fallback(100dvh, 100vh)` for progressive
  enhancement, in one declaration
- 🎬 [View transitions](/docs/concepts/view-transitions) – `viewTransition()` writes the `::view-transition-*` rules and
  hands back one class to share across elements
- 🤖 [MCP server](/docs/ai/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](/docs/overview/cheat-sheet).

## Installation

### General Guides

- [Using Vite](/docs/installation/vite): the compiled, globally deduplicated integration.

- [Bamboo CLI](/docs/installation/cli): generate artifacts and extraction-only CSS without Vite.

- [Using PostCSS](/docs/installation/postcss): integrate extraction-only output into an existing PostCSS pipeline.

### Framework Guides

The recommended setup for each JavaScript framework.

<FrameworkCards />

## Next Steps

Get familiar with the core features and concepts in Bamboo.

<Cards>
  <Card
    arrow
    title="Tokens"
    description="Learn how setup and customize design tokens to customize your colors, typography, and more"
    href="/docs/theming/tokens"
  />
  <Card
    arrow
    title="Recipes"
    description="Create composable style variants that are typed and generates the atomic or layer recipe"
    href="/docs/concepts/recipes"
  />
  <Card
    arrow
    title="Patterns"
    description="Use the built-in layout patterns like flex, grid, center to speed up your development"
    href="/docs/concepts/patterns"
  />
  <Card
    arrow
    title="Utilities"
    description="Learn how to create your own custom css properties and speed up your development"
    href="/docs/customization/utilities"
  />
</Cards>

## Acknowledgement

Bamboo CSS started as a fork of [Panda CSS](https://panda-css.com/).
