CLI Reference

Use Bamboo's Command-Line Interface (CLI) to develop, build, and preview your project from a terminal.

Common flags

These flags are shared between commands and are left out of the per-command tables below. Only --cwd is accepted everywhere; the rest list the commands that take them.

init

Initialize Bamboo in a project. This process will:

• Create a bamboo.config.ts file in your project with the default settings and presets.
• Emit CSS utilities for your project in the specified output directory.

pnpm bamboo init
 
# Initialize with interactive mode
pnpm bamboo init --interactive

bamboo

Run the extract process to generate static CSS from your project.

By default it will scan and generate CSS for the entire project depending on your include and exclude options from your config file.

pnpm bamboo
# You can also scan a specific file or folder
# using the optional glob argument
pnpm bamboo src/components/Button.tsx
pnpm bamboo "./src/components/**"

codegen

Generate new CSS utilities for your project based on the configuration file.

pnpm bamboo codegen
 
# Clean output directory before generating
pnpm bamboo codegen --clean
 
# Watch for config changes
pnpm bamboo codegen --watch

cssgen

Generate the CSS from files.

bamboo cssgen
 
# Generate CSS for specific type
bamboo cssgen tokens
 
# Generate CSS for specific glob
bamboo cssgen "src/**/*.css"
 
# Generate CSS files split into separate files per layer
bamboo cssgen --splitting

When using the cssgen command, you can pass a {type} argument to generate only a specific type of CSS. The supported types are: preflight, tokens, static, global, keyframes.

CSS Splitting

The --splitting flag enables CSS code splitting, which generates separate CSS files for different parts of your design system instead of a single monolithic CSS file. This is useful for:

• Selective loading - Load only the CSS you need for specific pages
• Easier debugging - Identify which layer contributes to the final CSS

Recipe selections compile to the same shared utility atoms as css(), so there is no per-recipe file. When using --splitting, Bamboo will generate the following structure:

styled-system/
├── styles.css              # @layer declarations + @imports for all layers
└── styles/
    ├── reset.css           # Preflight/reset CSS
    ├── global.css          # Global CSS styles
    ├── tokens.css          # Design token CSS variables
    ├── utilities.css       # Atomic utility classes
    └── themes/
        └── dark.css        # Theme-specific tokens (not auto-imported)
        └── light.css       # Theme-specific tokens (not auto-imported)

The main styles.css file contains the @layer declarations and imports all the layer files (but not the themes):

/* styled-system/styles.css */
@layer reset, base, tokens, utilities;
 
@import './styles/reset.css';
@import './styles/global.css';
@import './styles/tokens.css';
@import './styles/utilities.css';

Import styles.css for everything, or any of the files above on its own — the per-layer and per-theme files are all importable directly.

spec

Generate spec files for your theme (useful for documentation).

pnpm bamboo spec
 
# Generate specs in custom directory
pnpm bamboo spec --outdir ./theme-specs

analyze

Analyze design token and recipe usage.

By default, it will analyze your project based on the include and exclude config options.

pnpm bamboo analyze
 
# analyze a specific file
pnpm bamboo analyze src/components/Button.tsx
 
# analyze a specific glob
pnpm bamboo analyze "src/components/**"
 
# analyze only token usage
pnpm bamboo analyze --scope token
 
# analyze only recipe usage
pnpm bamboo analyze --scope recipe

debug

Debug design token extraction & CSS generated from files in glob.

More details in Debugging docs.

pnpm bamboo debug
 
# Debug a specific file
pnpm bamboo debug src/components/Button.tsx
 
# Output to stdout without writing files
pnpm bamboo debug --dry
 
# Only output resolved config
pnpm bamboo debug --only-config

ship

Ship extract result from files in glob.

By default it will extract from the entire project depending on your include and exclude options from your config file.

pnpm bamboo ship
# You can also analyze a specific file or folder
# using the optional glob argument
pnpm bamboo ship src/components/Button.tsx
pnpm bamboo ship "./src/components/**"

emit-pkg

Emit package.json with entrypoints, can be used to create a workspace package dedicated to the config.outdir, in combination with config.importMap

pnpm bamboo emit-pkg
 
# Specify output directory
pnpm bamboo emit-pkg --outdir styled-system

mcp

Removed. The MCP (Model Context Protocol) server ships as its own package so that installing Bamboo does not pull in the protocol SDK, which brings an HTTP server and a JOSE implementation with it.

npx -y @bamboocss/mcp

Run init-mcp to write a client config pointing at it. See the MCP Server guide for the flags it accepts.

init-mcp

Initialize MCP configuration for AI clients. This creates the necessary configuration files for AI assistants to connect to the Bamboo MCP server.

# Interactive mode - select clients from a list
pnpm bamboo init-mcp
 
# Configure specific clients
pnpm bamboo init-mcp --client claude,cursor
 
# Specify working directory
pnpm bamboo init-mcp --cwd ./my-project

Supported clients: claude, cursor, vscode, windsurf, codex

See the MCP Server guide for detailed usage and available tools.