# 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](https://panda-css.com/) v1, so the styling API is identical and
[migrating](/docs/migration/panda) is mostly a rename. What has changed since the fork is what reaches the browser and
what it costs:

- **Less CSS** — [`pruneUnusedTokens`](/docs/references/config#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`](/docs/guides/source-transformation) folds statically-resolvable
  `css()` calls into plain class strings at build time.
- **Less HTML** — [`cssMode: 'grouped'`](/docs/references/config#cssmode) 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](/docs/overview/faq#how-is-bamboo-css-different-from-panda-css)
has the rest.

## Installation

### General Guides

- [Bamboo CLI](/docs/installation/cli): The simplest way to use Bamboo is with the Bamboo CLI tool.

- [Using PostCSS](/docs/installation/postcss): (**Recommended**) Installing Bamboo as a PostCSS plugin is the
  recommended way to integrate it with your project.

### Framework Guides

Start using Bamboo CSS in your JavaScript framework using our framework-specific guides that cover our recommended
approach.

<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 stack, flex, grid 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/).

---

_This content is automatically generated from the official Bamboo CSS documentation._