---
title: Using Remix
description: How to use Bamboo with Remix with our dedicated integration.
---

<Callout type="warning">
  **Which Remix?** Anything scaffolded since Remix 2.7 — and everything React Router 7 and later — builds with Vite and
  has a `vite.config.ts`; follow [React Router](/docs/installation/react-router) for those, since the setup is the same
  and it uses `@bamboocss/vite`, which compiles every `css()` and `cva()` call away instead of shipping the style
  engine. The steps below are for the classic compiler — a project with a `remix.config.js` and no Vite config — where
  PostCSS is the integration Bamboo has, and `css()` and `cva()` resolve at runtime.
</Callout>

## Start a new project

<Steps>

### Create Remix project

To get started, we will need to create a new Remix project using the official
[Create Remix](https://remix.run/docs/en/main/start/quickstart) CLI. In this guide, we will use TypeScript.

If you don't enter any parameter, the CLI will guide you through the process of creating a new Remix app.

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

You will be asked a few questions, answer these as follows:

```sh
? Where should we create your new project? test-app
? Install dependencies? No
```

> **Note:** You should decline the dependency installation step as we will install dependencies together with Bamboo
> CSS.

### 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 Remix components are included in the `include` section of the `bamboo.config.ts`
file.

```js {5, 11} 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/routes/**/*.{ts,tsx,js,jsx}', './app/components/**/*.{ts,tsx,js,jsx}'],

  // Files to exclude
  exclude: [],

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

### Configure the entry CSS with layers

Create a new file `app/index.css` and add the following content:

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

Import the `index.css` file in your `app/root.tsx` file and add it to the `links` function. This guide uses the Remix
classic compiler, so the import takes no `?url` suffix and `cssBundleHref` from `@remix-run/css-bundle` carries the
bundled CSS:

```bash
pnpm add @remix-run/css-bundle
```

```tsx filename="app/root.tsx" {1,5,8-9}
import { cssBundleHref } from '@remix-run/css-bundle'
import type { LinksFunction } from '@remix-run/node'
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react'

import styles from './index.css'

export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
  { rel: 'stylesheet', href: styles },
]

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  )
}
```

### Start your build process

Start the dev server with `pnpm dev`.

### Start using Bamboo

```tsx filename="app/routes/_index.tsx"
import type { MetaFunction } from '@remix-run/node'
import { css } from '../../styled-system/css'

export const meta: MetaFunction = () => {
  return [{ title: 'New Remix App' }, { name: 'description', content: 'Welcome to Remix!' }]
}

export default function Index() {
  return <div className={css({ fontSize: '2xl', fontWeight: 'bold' })}>Hello 🎋!</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).

If your app doesn't reload when making changes to the `bamboo.config.ts` file, consider adding `watchPaths` in your
remix config file.

```js filename="remix.config.js"
export default {
  // ...
  watchPaths: ['bamboo.config.ts'],
}
```
