Presets

By default, any configuration you add in your own bamboo.config.js file is smartly merged with the default configuration, 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:

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.

// 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:

// 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
• globalCss
• globalFontface
• patterns
• staticCss
• theme
• 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.

// 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:

// bamboo.config.ts
import { defineConfig } from '@bamboocss/dev'
import myPreset from './my-preset'
 
export default defineConfig({
  presets: [myPreset()],
})

Which bamboo presets will be included ?

• @bamboocss/preset-base: ALWAYS included if NOT using eject: true

• @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:

import bambooPreset from '@bamboocss/preset-bamboo'
import { defineConfig } from '@bamboocss/dev'
 
export default defineConfig({
  // ...
  presets: [bambooPreset, myCustomPreset],
})

Minimal setup

If you want to use Bamboo with the bare minimum, without any of the defaults, you can read more about it here