Class Names

<ConsentBanner className="my-banner" />
<ConsentDialog className="my-dialog" />
<ConsentWidget className="my-widget" />

const theme = {
  slots: {
    consentBannerTitle: 'text-xl font-semibold',
    consentBannerDescription: 'text-sm text-gray-600',
    consentBannerFooter: 'flex gap-3',
    buttonPrimary: 'rounded-full px-6',
  },
} satisfies Theme;

import styles from './consent.module.css';

const theme = {
  slots: {
    consentBannerCard: styles.bannerCard,
    consentBannerTitle: styles.bannerTitle,
    buttonPrimary: styles.primaryButton,
  },
} satisfies Theme;

.bannerCard {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.9);
}

.bannerTitle {
  font-size: 1.25rem;
  font-weight: 700;
}

.primaryButton {
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

{/* Remove all styles from a specific component */}
<ConsentBanner noStyle />

{/* Remove all styles globally */}
<ConsentManagerProvider options={{ noStyle: true, ... }}>

const theme = {
  slots: {
    consentBannerCard: { noStyle: true, className: 'my-custom-card' },
  },
} satisfies Theme;