Styling with CSS Variables

CSS Variables are our recommended way to style your components. They provide a powerful way to create dynamic, maintainable themes for components. This approach is particularly useful for dark mode, theming, and responsive design.

Basic Usage

Each component has a set of predefined CSS variables that you can override:

<CookieBanner
  theme={{
    'banner.card': {
      style: {
        '--banner-background-color': 'red',
        '--banner-border-radius': '0px',
      },
    },
  }}
/>

All CSS Variables