CLI Reference

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

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
 
# Initialize with PostCSS config
pnpm bamboo init --postcss

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 and recipe
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 or recipe contributes to the final CSS

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
    ├── recipes.css         # @imports for all recipe files
    ├── recipes/
    │   ├── button.css      # Individual recipe: button
    │   ├── card.css        # Individual recipe: card
    │   └── ...             # Other recipes as separate files
    └── 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, recipes, utilities;
 
@import './styles/reset.css';
@import './styles/global.css';
@import './styles/tokens.css';
@import './styles/recipes.css';
@import './styles/utilities.css';

You can then choose how to import these files:

/* Option 1: Import everything (default) */
@import './styled-system/styles.css';
 
/* Option 2: Import specific layers only */
@import './styled-system/styles/tokens.css';
@import './styled-system/styles/utilities.css';
 
/* Option 3: Import specific recipes */
@import './styled-system/styles/recipes/button.css';
@import './styled-system/styles/recipes/card.css';
 
/* Option 4: Import a specific theme (when using multiple themes) */
@import './styled-system/styles/themes/oceanic.css';

studio

Realtime documentation for your design tokens.

pnpm bamboo studio
 
# Build static studio site
pnpm bamboo studio --build
 
# Preview built studio
pnpm bamboo studio --preview
 
# Use custom port
pnpm bamboo studio --port 3000

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

Start the MCP (Model Context Protocol) server for AI assistants. This exposes your design system to AI tools like Claude, Cursor, VS Code Copilot, and more.

pnpm bamboo mcp
 
# With custom config path
pnpm bamboo mcp --config ./bamboo.config.ts
 
# Specify working directory
pnpm bamboo mcp --cwd ./my-project

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.