---
title: Presets
description: Creating your own reusable preset for utilities and theme
---

By default, any configuration you add in your own `bamboo.config.js` file is smartly merged with the
[default configuration](/docs/customization/theme), allowing you to override or extend specific parts of the
configuration.

You can specify a preset in your `bamboo.config.js` file by using the `presets` option:

```js
import { defineConfig } from '@bamboocss/dev'

export default defineConfig({
  presets: ['@acmecorp/bamboo-preset'],
})
```

## Creating a preset

Presets are also valid Bamboo configuration objects, taking a similar shape to the configuration you would add in your
`bamboo.config.ts` file.

> **Note:** Every preset must have a unique name.

```js
// my-preset.js
import { definePreset } from '@bamboocss/dev'

export default definePreset({
  name: 'my-preset',
  theme: {
    tokens: {
      colors: {
        rose: {
          50: { value: '#fff1f2' },
          // ...
          800: { value: '#9f2233' },
        },
      },
    },
  },
})
```

You can then use this preset in your `bamboo.config.ts` file:

```js
// bamboo.config.ts
import { defineConfig } from '@bamboocss/dev'
import myPreset from './my-preset'

export default defineConfig({
  presets: [myPreset],
})
```

The available keys for a preset are:

- [`conditions`](/docs/concepts/conditional-styles)
- [`global.css`](/docs/concepts/writing-styles#global-styles)
- [`global.fontface`](/docs/guides/fonts#global-font-face)
- [`global.positionTry`](/docs/references/config#globalpositiontry)
- [`global.vars`](/docs/concepts/global-styles#custom-global-variables-globalvars)
- [`patterns`](/docs/concepts/patterns)
- [`presets`](#creating-a-preset) — a preset may itself nest presets
- [`staticCss`](/docs/guides/static)
- [`theme`](/docs/customization/theme)
- [`themes`](/docs/guides/multiple-themes)
- [`utilities`](/docs/customization/utilities)

### Asynchronous presets

There are cases where you need to perform logic to determine the content of your preset, you'd call functions to do
this. In cases where they're asynchronous; bamboo allows promises, given that they resolve to a valid preset object.

```js
// my-preset.js
export default async function myPreset() {
  const roseColors = await getRoseColors()

  return definePreset({
    name: 'my-preset',
    theme: {
      tokens: {
        colors: {
          rose: roseColors,
        },
      },
    },
  })
}
```

You can then use this preset in your `bamboo.config.ts` file:

```js
// bamboo.config.ts
import { defineConfig } from '@bamboocss/dev'
import myPreset from './my-preset'

export default defineConfig({
  presets: [myPreset()],
})
```

## Which bamboo presets will be included ?

![Visual helper](/stately-presets-merging.png)

- `@bamboocss/preset-base`: included by `defaultPresets`, which is what an unset `presets` loads

- `@bamboocss/preset-bamboo`: only included by default if you haven't specified the `presets` config option, otherwise
  you'll have to include that preset by yourself like so:

```ts
import bambooPreset from '@bamboocss/preset-bamboo'
import { defineConfig } from '@bamboocss/dev'

export default defineConfig({
  // ...
  presets: [bambooPreset, myCustomPreset],
})
```
