---
title: Using Qwik
description: Easily use Bamboo with Qwik with our dedicated integration.
---

## Start a new project

<Steps>

### Create Qwik project

To get started, we will need to create a new Qwik project using `typescript` template.

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    npm create qwik@latest
    ```
  </Tab>
  <Tab>
    ```bash
    pnpm create qwik@latest
    ```
  </Tab>
  <Tab>
    ```bash
    yarn create qwik
    ```
  </Tab>
  <Tab>
    ```bash
    bun create qwik@latest
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Install Bamboo

Install bamboo and the Vite plugin, then create your `bamboo.config.ts` file. Qwik builds with Vite, so
`@bamboocss/vite` is the integration: it compiles every `css()` and `cva()` call to a literal class string and ships no
style engine.

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    npm install -D @bamboocss/dev @bamboocss/vite
    npx bamboo init
    ```
  </Tab>
  <Tab>
    ```bash
    pnpm install -D @bamboocss/dev @bamboocss/vite
    pnpm bamboo init
    ```
  </Tab>
  <Tab>
    ```bash
    yarn add -D @bamboocss/dev @bamboocss/vite
    yarn bamboo init
    ```
  </Tab>
  <Tab>
    ```bash
    bun add -D @bamboocss/dev @bamboocss/vite
    bun bamboo init
    ```
  </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`.

The build itself no longer needs it. The Vite plugin generates `styled-system/` in `buildStart`, before anything
resolves an import of it, so a fresh clone builds without a separate codegen step. Keep the script regardless: `tsc` and
your editor read the generated types without ever running the plugin.

### Configure the content

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

```ts {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',
})
```

### Add the plugin to your Vite config

```ts {1,8} filename="vite.config.ts"
import bamboocss from '@bamboocss/vite'
import { defineConfig } from 'vite'
import { qwikCity } from '@builder.io/qwik-city/vite'
import { qwikVite } from '@builder.io/qwik/optimizer'

export default defineConfig(() => {
  return {
    plugins: [bamboocss(), qwikCity(), qwikVite()],
  }
})
```

### Import the virtual stylesheet

Import it once, from `src/root.tsx`:

```tsx {5} filename="src/root.tsx"
import { component$ } from '@builder.io/qwik'
import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city'
import { RouterHead } from './components/head'

import 'virtual:bamboo.css'
```

There is no `postcss.config.cjs` entry for Bamboo and no file carrying the `@layer` statement: the plugin serves the
stylesheet as a virtual module that emits its own layer order.

Delete the template's `src/global.css` and its import from `src/root.tsx` while you are there. It is not in a cascade
layer, so every declaration in it outranks every Bamboo utility — which is the one way this setup goes wrong quietly.

Reference the ambient declaration so TypeScript accepts that import:

```ts filename="src/vite-env.d.ts"
/// <reference types="vite/client" />
/// <reference types="@bamboocss/vite/client" />
```

## Start your build process

Start the dev server with `pnpm dev`.

### Start using Bamboo

```tsx filename="src/routes/layout.tsx"
import { component$, Slot } from '@builder.io/qwik'
import { css } from '../../styled-system/css'

export default component$(() => {
  return (
    <div class={css({ p: '10', bg: 'gray.900', h: 'dvh' })}>
      <Slot />
    </div>
  )
})
```

</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).
