Styling Overview

c15t's theming system gives you multiple levels of control, from high-level design tokens to complete style removal.

The flow:

Define tokens (colors, spacing, radius, etc.) in JavaScript
Tokens are injected as CSS custom properties (--c15t-*) at runtime
Components consume these variables in their default styles
You override at any level: tokens, slots, CSS variables, or raw classNames

Styling Approaches

Approach	Control	Use When
Tokens	High	Changing global colors, typography, spacing, radius, shadows, or motion
Slots	Medium	Targeting specific component parts (e.g., the banner title, dialog footer)
CSS Variables	Medium	Overriding `--c15t-*` variables from external CSS
className	Medium	Passing class names to components or slots
noStyle	Full	Removing all default styles, building from scratch

Quick Start

import {
  type Theme,
  ConsentManagerProvider,
  ConsentBanner,
  ConsentDialog,
} from '@c15t/nextjs';

const theme = {
  colors: {
    primary: '#6366f1',
    primaryHover: '#4f46e5',
  },
  radius: {
    md: '0.75rem',
    lg: '1rem',
  },
  slots: {
    consentBannerTitle: 'text-xl font-semibold',
    buttonPrimary: 'rounded-full',
  },
} satisfies Theme;

export function ConsentManager({ children }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'c15t',
        backendURL: '/api/c15t',
        theme,
      }}
    >
      <ConsentBanner />
      <ConsentDialog />
      {children}
    </ConsentManagerProvider>
  );
}

Styling Paths

1. Design tokens

Set global values for colors, typography, spacing, radius, shadows, and motion:

options={{ theme: { colors: { primary: '#6366f1' } } }}

2. Component slots

Target specific component parts via the slots object:

options={{ theme: { slots: { consentBannerTitle: 'text-2xl font-bold' } } }}

3. CSS variables

Override --c15t-* custom properties in your stylesheet.

4. className prop

Pass className directly to components:

<ConsentBanner className="my-custom-banner" />;

5. noStyle prop

Strip all default styles and build from scratch (best paired with Headless Mode):

<ConsentBanner noStyle />;

Common Styling Tasks

Change brand color globally

options={{ theme: { colors: { primary: '#0ea5e9', primaryHover: '#0284c7' } } }}

Make the banner card more compact

options={{ theme: { spacing: { md: '0.75rem', lg: '1rem' } } }}

Round primary/secondary buttons

options={{ theme: { slots: { buttonPrimary: 'rounded-full', buttonSecondary: 'rounded-full' } } }}

Enable dark mode safely

options={{
  colorScheme: 'system',
  theme: {
    colors: { surface: '#ffffff', text: '#1f2937' },
    dark: { surface: '#111827', text: '#f9fafb' },
  },
}}

Info

noStyle: true removes layout and visual defaults. Use it only when you want full control.
Use either tokens/slots or raw CSS variable overrides intentionally to avoid conflicting style sources.
For dark mode, c15t supports .dark and .c15t-dark.

API Reference

Property

Types

Loading…

Styling Overview

Styling Approaches

Quick Start

Styling Paths

1. Design tokens

2. Component slots

3. CSS variables

4. className prop

5. noStyle prop

Common Styling Tasks

Change brand color globally

Make the banner card more compact

Round primary/secondary buttons

Enable dark mode safely

API Reference

colors?Color palette for light mode.ColorTokens | undefined

dark?Dark mode color overrides.ColorTokens | undefined

motion?Animation and transition timing.MotionTokens | undefined

radius?Border radius scale for rounded corners.RadiusTokens | undefined

shadows?Box shadow scale for depth and elevation.ShadowTokens | undefined

slots?Component-specific style overrides.ComponentSlots | undefined

spacing?Spacing scale for internal padding and margins.SpacingTokens | undefined

typography?Typography settings for text elements.TypographyTokens | undefined

colors?Color palette for light mode.ColorTokens | undefined

dark?Dark mode color overrides.ColorTokens | undefined

motion?Animation and transition timing.MotionTokens | undefined

radius?Border radius scale for rounded corners.RadiusTokens | undefined

shadows?Box shadow scale for depth and elevation.ShadowTokens | undefined

slots?Component-specific style overrides.ComponentSlots | undefined

spacing?Spacing scale for internal padding and margins.SpacingTokens | undefined

typography?Typography settings for text elements.TypographyTokens | undefined

border?Border color for containers and inputs.string | undefined

borderHover?Hover state for bordered elements.string | undefined

overlay?Overlay color for modal backdrops.string | undefined

primary?Primary brand/accent color for interactive elements.string | undefined

primaryHover?Hover/active state for primary elements.string | undefined

surface?Main background color for panels and containers.string | undefined

surfaceHover?Hover state for surface elements.string | undefined

switchThumb?Toggle thumb color.string | undefined

switchTrack?Toggle track color (off state).string | undefined

switchTrackActive?Toggle track color (on state).string | undefined

text?Primary text color for headings and body.string | undefined

textMuted?Muted text color for secondary content.string | undefined

textOnPrimary?Text color for content on primary background.string | undefined

border?Border color for containers and inputs.string | undefined

borderHover?Hover state for bordered elements.string | undefined

overlay?Overlay color for modal backdrops.string | undefined

primary?Primary brand/accent color for interactive elements.string | undefined

primaryHover?Hover/active state for primary elements.string | undefined

surface?Main background color for panels and containers.string | undefined

surfaceHover?Hover state for surface elements.string | undefined

switchThumb?Toggle thumb color.string | undefined

switchTrack?Toggle track color (off state).string | undefined

switchTrackActive?Toggle track color (on state).string | undefined

text?Primary text color for headings and body.string | undefined

textMuted?Muted text color for secondary content.string | undefined

textOnPrimary?Text color for content on primary background.string | undefined

duration?Duration presets for transitions.{ fast?: string | undefined; normal?: st...

easing?Default CSS easing function for general animation curves.string | undefined

easingInOut?CSS easing function for on-screen movement. Use when elements already on screen need to move or morph.string | undefined

easingOut?CSS easing function for enter/exit animations. Use for modals, tooltips, dropdowns, and any element entering or exiting.string | undefined

easingSpring?CSS easing function with spring-like overshoot. Use for playful, bouncy animations.string | undefined

full?@default '9999px'string | undefined

lg?@default '0.75rem' (12px)string | undefined

md?@default '0.5rem' (8px)string | undefined

sm?@default '0.25rem' (4px)string | undefined

lg?@default '0 8px 24px hsla(0, 0%, 0%, 0.12)'string | undefined

md?@default '0 4px 12px hsla(0, 0%, 0%, 0.08)'string | undefined