---
title: Using Rsbuild
description: Easily use Bamboo with Rsbuild, React and Typescript with our dedicated integration.
---

## Start a new project

<Steps>

### Create Rsbuild project

To get started, we will need to create a new Rsbuild project using `react-ts` template.

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    pnpm create rsbuild@latest --dir test-app --template react-ts
    cd test-app
    pnpm install
    ```
  </Tab>
  <Tab>
    ```bash
    npm create rsbuild@latest --dir test-app -- --template react-ts
    cd test-app
    npm install
    ```
  </Tab>
  <Tab>
    ```bash
    yarn create rsbuild@latest --dir test-app --template react-ts
    cd test-app
    yarn
    ```
  </Tab>
  <Tab>
    ```bash
    bun create rsbuild@latest --dir test-app --template react-ts
    cd test-app
    bun install
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Install Bamboo

Install bamboo and create your `bamboo.config.ts` file.

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    pnpm install -D @bamboocss/dev
    pnpm bamboo init --postcss
    ```
  </Tab>
  <Tab>
    ```bash
    npm install -D @bamboocss/dev
    npx bamboo init --postcss
    ```
  </Tab>
  <Tab>
    ```bash
    yarn add -D @bamboocss/dev
    yarn bamboo init --postcss
    ```
  </Tab>
  <Tab>
    ```bash
    bun add -D @bamboocss/dev
    bun bamboo init --postcss
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Update package.json scripts

Add `"prepare": "bamboo codegen"` to `scripts`. It runs [codegen](/docs/references/cli#codegen) after every dependency
install, so the output directory can stay in `.gitignore`.

### Configure the content

Make sure that all of the paths of your React components are included in the `include` section of the `bamboo.config.ts`
file.

```js {8} filename="bamboo.config.ts"
import { defineConfig } from '@bamboocss/dev'

export default defineConfig({
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],

  // Files to exclude
  exclude: [],

  // The output directory for your css system
  outdir: 'styled-system',
})
```

### Configure the entry CSS with layers

Add this code to an `src/App.css` file imported in the root component of your project.

```css filename="src/App.css"
@layer reset, base, tokens, recipes, utilities;
```

## Start your build process

Start the dev server with `pnpm dev`.

### Start using Bamboo

```tsx filename="src/App.tsx"
import { css } from '../styled-system/css'

function App() {
  return <div className={css({ fontSize: '2xl', fontWeight: 'bold' })}>Hello 🎋!</div>
}

export default App
```

</Steps>

## Troubleshooting

If your IDE does not autocomplete `styled-system` imports, add that directory to `include` in `tsconfig.json`. See
[the CLI guide](/docs/installation/cli#troubleshooting).
