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

## Start a new project

<Steps>

### Create Ember project

To get started, we will need to create a new Ember project using the `embroider` build system. We will name our project
`test-app` but you can name it whatever you want.

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']} variant="code">
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    pnpm dlx ember-cli@latest new test-app --embroider --no-welcome --typescript --pnpm
    ```
  </Tab>
  <Tab>
    ```bash
    npx ember-cli@latest new test-app --embroider --no-welcome --typescript
    ```
  </Tab>
  <Tab>
    ```bash
    yarn dlx ember-cli@latest new test-app --embroider --no-welcome --typescript --yarn
    ```
  </Tab>
  <Tab>
    ```bash
    bunx ember-cli@latest new test-app --embroider --no-welcome --typescript --skip-install
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

Enter the newly created directory:

```bash
cd test-app
```

### Install Bamboo

Install bamboo and its peer dependencies, as well as `postcss-loader`. Run the init command to generate the
`bamboo.config.ts` and `postcss.config.cjs` files.

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

### Enable PostCSS support

In your `ember-cli-build.js` file, configure PostCSS to process your CSS files.

```js {12-23} filename="ember-cli-build.js"
'use strict'

const EmberApp = require('ember-cli/lib/broccoli/ember-app')

module.exports = function (defaults) {
  const app = new EmberApp(defaults, {
    // Add options here
  })

  const { Webpack } = require('@embroider/webpack')
  return require('@embroider/compat').compatBuild(app, Webpack, {
    packagerOptions: {
      webpackConfig: {
        module: {
          rules: [
            {
              test: /\.css$/i,
              use: ['postcss-loader'],
            },
          ],
        },
      },
    },
    // other options...
  })
}
```

### Configure the PostCSS plugin

Add the `.embroider` folder to the allow list so the Bamboo PostCSS plugin picks up your app CSS files.

```js {4} filename="postcss.config.cjs"
module.exports = {
  plugins: {
    '@bamboocss/dev/postcss': {
      allow: [/node_modules\/.embroider/],
    },
  },
}
```

### 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 Ember components are included in the `include` section of the `bamboo.config.ts`
file. Set the `outdir` to the app folder so the code can be imported in your Ember app. Adjust the `importMap`
accordingly to reflect your app name.

```js {8,19-22} 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: ['./app/**/*.{js,ts,gjs,gts}'],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {},
  },

  // The output directory for your css system
  outdir: 'app/styled-system',

  // Configure the import map to use your project name
  importMap: 'test-app/styled-system',
})
```

### Configure the entry CSS with layers

Add this code to an `app/index.css` file.

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

Next, import the file in your `app/app.ts` file.

```ts {5} filename="app/app.ts"
import Application from '@ember/application'
import Resolver from 'ember-resolver'
import loadInitializers from 'ember-load-initializers'
import config from 'test-app/config/environment'
import 'test-app/index.css'

export default class App extends Application {
  modulePrefix = config.modulePrefix
  podModulePrefix = config.podModulePrefix
  Resolver = Resolver
}

loadInitializers(App, config.modulePrefix)
```

### Start your build process

Start the dev server with `pnpm start`.

### Start using Bamboo

```ts filename="app/components/hello-bamboo.ts"
import Component from '@glimmer/component'
import { css } from 'test-app/styled-system/css'

export default class HelloBamboo extends Component {
  style = css({ fontSize: '5xl', fontWeight: 'bold' })
}
```

```hbs filename="app/components/hello-bamboo.hbs"
<div class={{this.style}}>Hello 🎋!</div>
```

Render `<HelloBamboo />` from a template such as `app/templates/application.hbs`.

> For the best developer experience, set up
> [template tag component authoring format](https://guides.emberjs.com/release/components/template-tag-format/) in
> Ember.

</Steps>

## Troubleshooting

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