Is Cookie Consent free?

Yes. Cookie Consent is free for personal and commercial projects, with full source on this page.

How do I install Cookie Consent?

Run npx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.

Does Cookie Consent support keyboard and screen readers?

A labelled region (not a modal) so it never traps focus. Switches are role="switch" buttons with aria-checked; the locked one is aria-disabled.

Does Cookie Consent respect reduced motion?

Reduced motion removes the movement and keeps every state change.

Opening component…

Loading the library…

Cookie Consent

A compact cookie card with Accept / Reject and a Customise view where each category has its own switch.

$npx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json

View as Markdown

Freev1.0.0Install

Fluid

components/sundae/cookie-consent.tsx

'use client'

import { useState } from 'react'
import './cookie-consent.css'

export interface CookieCategory { id: string; label: string; hint: string; locked?: boolean }
export interface CookieConsentProps {
  categories: CookieCategory[]
  onSave?: (enabled: string[]) => void
  defaultCustom?: boolean
  fill?: 'dark' | 'light'
  className?: string
}

/** Cookie consent card with per-category switches. */
export function CookieConsent({ categories, onSave, defaultCustom = false, fill = 'dark', className }: CookieConsentProps) {
  const locked = categories.filter((c) => c.locked).map((c) => c.id)
  const [custom, setCustom] = useState(defaultCustom)
  const [on, setOn] = useState<string[]>(locked)
  const [saved, setSaved] = useState<string[] | null>(null)
  const save = (ids: string[]) => { setSaved(ids); onSave?.(ids) }
  const cls = ['sd-cks', className].filter(Boolean).join(' ')
  if (saved)
    return (
      <section className={cls} data-fill={fill} aria-label="Cookie preferences">
        <div className="sd-cks__done" role="status"><svg viewBox="0 0 16 16" aria-hidden><path d="m3.5 8.5 3 3 6-7" /></svg>Preferences saved{saved.length > locked.length ? '' : ' (essential only)'}<button type="button" onClick={() => setSaved(null)}>Change</button></div>
      </section>
    )
  return (
    <section className={cls} data-fill={fill} aria-label="Cookie preferences">
      <div className="sd-cks__h">We use cookies</div>
      <p className="sd-cks__p">Some are needed for the site to work. Others help us measure and improve it. <a href="#privacy">Privacy policy</a></p>
      <div className="sd-cks__cats" data-open={custom || undefined}>
        <div>
          {categories.map((c) => (
            <div key={c.id} className="sd-cks__cat">
              <div><b id={`ck-${c.id}`}>{c.label}</b><small>{c.hint}</small></div>
              <button
                type="button"
                role="switch"
                className="sd-cks__sw"
                aria-labelledby={`ck-${c.id}`}
                aria-checked={on.includes(c.id)}
                aria-disabled={c.locked || undefined}
                tabIndex={custom ? 0 : -1}
                onClick={() => !c.locked && setOn((o) => (o.includes(c.id) ? o.filter((x) => x !== c.id) : [...o, c.id]))}
              />
            </div>
          ))}
        </div>
      </div>
      <div className="sd-cks__btns">
        {custom ? (
          <>
            <button type="button" className="sd-cks__b" onClick={() => save(categories.map((c) => c.id))}>Accept all</button>
            <button type="button" className="sd-cks__b sd-cks__b--p" onClick={() => save(on)}>Save choices</button>
          </>
        ) : (
          <>
            <button type="button" className="sd-cks__b" onClick={() => save(locked)}>Reject all</button>
            <button type="button" className="sd-cks__b" onClick={() => save(categories.map((c) => c.id))}>Accept all</button>
            <button type="button" className="sd-cks__link" onClick={() => setCustom(true)}>Customise</button>
          </>
        )}
      </div>
    </section>
  )
}

components/sundae/cookie-consent.css

.sd-cks { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-cks[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-cks button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-cks :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-cks .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-cks { width: min(100%, 320px); padding: 16px; border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -24px rgb(0 0 0 / 0.5); }
.sd-cks[data-fill='light'] { box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -24px rgb(0 0 0 / 0.18); }
.sd-cks__h { font-weight: 650; font-size: 15px; }
.sd-cks__p { margin: 6px 0 14px; font-size: 13px; color: var(--mute); line-height: 1.5; }
.sd-cks__p a { color: var(--fg); }
.sd-cks__cats { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms ease; }
.sd-cks__cats[data-open] { grid-template-rows: 1fr; }
.sd-cks__cats > div { overflow: hidden; }
.sd-cks__cat { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.sd-cks__cat:last-child { margin-bottom: 12px; }
.sd-cks__cat div { flex: 1; }
.sd-cks__cat b { display: block; font-size: 13.5px; font-weight: 600; }
.sd-cks__cat small { font-size: 12px; color: var(--mute); }
.sd-cks__sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--soft) !important; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 200ms; }
.sd-cks__sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 99px; background: var(--mute); transition: transform 260ms cubic-bezier(0.3, 1.5, 0.4, 1), background-color 200ms; }
.sd-cks__sw[aria-checked='true'] { background: var(--strong) !important; box-shadow: none; }
.sd-cks__sw[aria-checked='true']::after { transform: translateX(16px); background: var(--on); }
.sd-cks__sw[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.sd-cks__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sd-cks__b { height: 38px; border-radius: 11px; font-weight: 600; font-size: 13px; box-shadow: inset 0 0 0 1px var(--line); }
.sd-cks__b--p { background: var(--strong) !important; color: var(--on) !important; box-shadow: none; }
.sd-cks__link { grid-column: 1 / -1; height: 30px; font-size: 12.5px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.sd-cks__done { display: flex; align-items: center; gap: 8px; font-size: 13.5px; animation: sd-cks-in 300ms ease; }
.sd-cks__done svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sd-cks__done button { margin-left: auto; font-size: 12.5px; color: var(--mute); text-decoration: underline; }
@keyframes sd-cks-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .sd-cks *, .sd-cks *::before, .sd-cks *::after { animation: none !important; transition: none !important; } }

Overview

Accept all and Reject all are equal weight, as regulators expect. Customise expands the card in place into category switches with one-line explanations; Necessary is locked on.

Saving collapses it to a small confirmation that fades away.

When to use

First visit on sites that set non-essential cookies.

When not to use

Sites with only essential cookies: no banner is needed.

Installation

$pnpm dlx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json

$npx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json

$yarn dlx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json

$bunx --bun shadcn@latest add https://sundaeui.dev/r/cookie-consent.json

Works in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view.

Usage

Example

import { CookieConsent } from '@/components/sundae/cookie-consent'

<CookieConsent />

Props

Prop	Type	Default
`categories*` Categories.	`{ id: string; label: string; hint: string; locked?: boolean }[]`	`—`
`onSave` Called with enabled category ids.	`(enabled: string[]) => void`	`—`
`fill` Surface: dark or light.	`'dark' \| 'light'`	`'dark'`

Accessibility

A labelled region (not a modal) so it never traps focus.
Switches are role="switch" buttons with aria-checked; the locked one is aria-disabled.
Reduced motion removes the movement and keeps every state change.

Customization

Colours are CSS custom properties on .sd-cks; override them in your own stylesheet.
fill="light" switches the built-in light palette.

FAQ

Is Cookie Consent free?: Yes. Cookie Consent is free for personal and commercial projects, with full source on this page.
How do I install Cookie Consent?: Run npx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
Does Cookie Consent support keyboard and screen readers?: A labelled region (not a modal) so it never traps focus. Switches are role="switch" buttons with aria-checked; the locked one is aria-disabled.
Does Cookie Consent respect reduced motion?: Reduced motion removes the movement and keeps every state change.

All components →

S—118
S—118
Announcement Bar
Components · Refined
S—149
S—149
Inline Alert
Components · Refined
S—222
S—222
Permission Prompt
Components · Refined
S—472
Pro
S—472
Glass Control Center
Components · Refined
S—016
S—016
Toast Stack
Components · Refined
S—025
Pro
S—025
Sheet Drawer
Components · Refined

Opening component…

Cookie Consent

A compact cookie card with Accept / Reject and a Customise view where each category has its own switch.

$npx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json

View as Markdown

Freev1.0.0Install

Fluid

We use cookies

Some are needed for the site to work. Others help us measure and improve it. Privacy policy

NecessarySign-in, security, your cart.

AnalyticsAnonymous usage to improve pages.

MarketingMeasure ads and campaigns.

components/sundae/cookie-consent.tsx

'use client'

import { useState } from 'react'
import './cookie-consent.css'

export interface CookieCategory { id: string; label: string; hint: string; locked?: boolean }
export interface CookieConsentProps {
  categories: CookieCategory[]
  onSave?: (enabled: string[]) => void
  defaultCustom?: boolean
  fill?: 'dark' | 'light'
  className?: string
}

/** Cookie consent card with per-category switches. */
export function CookieConsent({ categories, onSave, defaultCustom = false, fill = 'dark', className }: CookieConsentProps) {
  const locked = categories.filter((c) => c.locked).map((c) => c.id)
  const [custom, setCustom] = useState(defaultCustom)
  const [on, setOn] = useState<string[]>(locked)
  const [saved, setSaved] = useState<string[] | null>(null)
  const save = (ids: string[]) => { setSaved(ids); onSave?.(ids) }
  const cls = ['sd-cks', className].filter(Boolean).join(' ')
  if (saved)
    return (
      <section className={cls} data-fill={fill} aria-label="Cookie preferences">
        <div className="sd-cks__done" role="status"><svg viewBox="0 0 16 16" aria-hidden><path d="m3.5 8.5 3 3 6-7" /></svg>Preferences saved{saved.length > locked.length ? '' : ' (essential only)'}<button type="button" onClick={() => setSaved(null)}>Change</button></div>
      </section>
    )
  return (
    <section className={cls} data-fill={fill} aria-label="Cookie preferences">
      <div className="sd-cks__h">We use cookies</div>
      <p className="sd-cks__p">Some are needed for the site to work. Others help us measure and improve it. <a href="#privacy">Privacy policy</a></p>
      <div className="sd-cks__cats" data-open={custom || undefined}>
        <div>
          {categories.map((c) => (
            <div key={c.id} className="sd-cks__cat">
              <div><b id={`ck-${c.id}`}>{c.label}</b><small>{c.hint}</small></div>
              <button
                type="button"
                role="switch"
                className="sd-cks__sw"
                aria-labelledby={`ck-${c.id}`}
                aria-checked={on.includes(c.id)}
                aria-disabled={c.locked || undefined}
                tabIndex={custom ? 0 : -1}
                onClick={() => !c.locked && setOn((o) => (o.includes(c.id) ? o.filter((x) => x !== c.id) : [...o, c.id]))}
              />
            </div>
          ))}
        </div>
      </div>
      <div className="sd-cks__btns">
        {custom ? (
          <>
            <button type="button" className="sd-cks__b" onClick={() => save(categories.map((c) => c.id))}>Accept all</button>
            <button type="button" className="sd-cks__b sd-cks__b--p" onClick={() => save(on)}>Save choices</button>
          </>
        ) : (
          <>
            <button type="button" className="sd-cks__b" onClick={() => save(locked)}>Reject all</button>
            <button type="button" className="sd-cks__b" onClick={() => save(categories.map((c) => c.id))}>Accept all</button>
            <button type="button" className="sd-cks__link" onClick={() => setCustom(true)}>Customise</button>
          </>
        )}
      </div>
    </section>
  )
}

components/sundae/cookie-consent.css

.sd-cks { --bg: #1c1c1c; --fg: #f6f6f6; --mute: #8e8e8e; --line: rgb(255 255 255 / 0.1); --soft: rgb(255 255 255 / 0.07); --strong: #fafafa; --on: #111; 
  color: var(--fg); font-size: 14px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.sd-cks[data-fill='light'] { --bg: #fff; --fg: #121212; --mute: #6f6f6f; --line: rgb(0 0 0 / 0.09); --soft: rgb(0 0 0 / 0.05); --strong: #111; --on: #fff; }
.sd-cks button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sd-cks :focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sd-cks .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sd-cks { width: min(100%, 320px); padding: 16px; border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -24px rgb(0 0 0 / 0.5); }
.sd-cks[data-fill='light'] { box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -24px rgb(0 0 0 / 0.18); }
.sd-cks__h { font-weight: 650; font-size: 15px; }
.sd-cks__p { margin: 6px 0 14px; font-size: 13px; color: var(--mute); line-height: 1.5; }
.sd-cks__p a { color: var(--fg); }
.sd-cks__cats { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms ease; }
.sd-cks__cats[data-open] { grid-template-rows: 1fr; }
.sd-cks__cats > div { overflow: hidden; }
.sd-cks__cat { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.sd-cks__cat:last-child { margin-bottom: 12px; }
.sd-cks__cat div { flex: 1; }
.sd-cks__cat b { display: block; font-size: 13.5px; font-weight: 600; }
.sd-cks__cat small { font-size: 12px; color: var(--mute); }
.sd-cks__sw { position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--soft) !important; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 200ms; }
.sd-cks__sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 99px; background: var(--mute); transition: transform 260ms cubic-bezier(0.3, 1.5, 0.4, 1), background-color 200ms; }
.sd-cks__sw[aria-checked='true'] { background: var(--strong) !important; box-shadow: none; }
.sd-cks__sw[aria-checked='true']::after { transform: translateX(16px); background: var(--on); }
.sd-cks__sw[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.sd-cks__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sd-cks__b { height: 38px; border-radius: 11px; font-weight: 600; font-size: 13px; box-shadow: inset 0 0 0 1px var(--line); }
.sd-cks__b--p { background: var(--strong) !important; color: var(--on) !important; box-shadow: none; }
.sd-cks__link { grid-column: 1 / -1; height: 30px; font-size: 12.5px; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.sd-cks__done { display: flex; align-items: center; gap: 8px; font-size: 13.5px; animation: sd-cks-in 300ms ease; }
.sd-cks__done svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sd-cks__done button { margin-left: auto; font-size: 12.5px; color: var(--mute); text-decoration: underline; }
@keyframes sd-cks-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .sd-cks *, .sd-cks *::before, .sd-cks *::after { animation: none !important; transition: none !important; } }

Overview

Accept all and Reject all are equal weight, as regulators expect. Customise expands the card in place into category switches with one-line explanations; Necessary is locked on.

Saving collapses it to a small confirmation that fades away.

When to use

First visit on sites that set non-essential cookies.

When not to use

Sites with only essential cookies: no banner is needed.

Installation

$pnpm dlx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json

$npx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json

$yarn dlx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json

$bunx --bun shadcn@latest add https://sundaeui.dev/r/cookie-consent.json

Works in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view.

Usage

Example

import { CookieConsent } from '@/components/sundae/cookie-consent'

<CookieConsent />

Props

Prop	Type	Default
`categories*` Categories.	`{ id: string; label: string; hint: string; locked?: boolean }[]`	`—`
`onSave` Called with enabled category ids.	`(enabled: string[]) => void`	`—`
`fill` Surface: dark or light.	`'dark' \| 'light'`	`'dark'`

Accessibility

A labelled region (not a modal) so it never traps focus.
Switches are role="switch" buttons with aria-checked; the locked one is aria-disabled.
Reduced motion removes the movement and keeps every state change.

Customization

Colours are CSS custom properties on .sd-cks; override them in your own stylesheet.
fill="light" switches the built-in light palette.

FAQ

Is Cookie Consent free?: Yes. Cookie Consent is free for personal and commercial projects, with full source on this page.
How do I install Cookie Consent?: Run npx shadcn@latest add https://sundaeui.dev/r/cookie-consent.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
Does Cookie Consent support keyboard and screen readers?: A labelled region (not a modal) so it never traps focus. Switches are role="switch" buttons with aria-checked; the locked one is aria-disabled.
Does Cookie Consent respect reduced motion?: Reduced motion removes the movement and keeps every state change.

All components →

S—118
S—118
Announcement Bar
Components · Refined
S—149
S—149
Inline Alert
Components · Refined
S—222
S—222
Permission Prompt
Components · Refined
S—472
Pro
S—472
Glass Control Center
Components · Refined
S—016
S—016
Toast Stack
Components · Refined
S—025
Pro
S—025
Sheet Drawer
Components · Refined

More like this

More like this