fetaUI
GitHub

Cookie Banner

Asks once at the bottom of the page. Reject all and Accept all carry the same weight.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/cookie-banner
Playground
Cookie consent

We use essential cookies to run this site. With your OK, we'd also use optional ones to remember settings and learn what helps.

Default
Cookie consent

We use essential cookies to run this site. With your OK, we'd also use optional ones to remember settings and learn what helps.

Hover: only the Button changes, the tray stays still
Cookie consent

We use essential cookies to run this site. With your OK, we'd also use optional ones to remember settings and learn what helps.

Compact
Cookie consent

We use cookies. Read the policy

Saved
Cookie consent

Choices saved

Essential and Preferences are on. Change this any time in the footer.

State
Icons animation
Fail next action
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/cookie-banner

Accessibility

  • A region named Cookie consent. It does not trap focus.
  • Saved is announced as a status.
  • Customize opens Cookie Preferences, which returns focus here on close.

Motion

  • Rises 16 px and fades in over 240 ms.
  • Nothing bounces or pulses to pull a choice out of anyone.
  • Saved crossfades in 200 ms and hides after 4 s.
  • Leaves in 180 ms.
  • With reduced motion, it does not rise or move.

Responsive behavior

  • 680 px on Web, 484 px on Compact and 358 px on Mobile.
  • On Mobile, Reject all and Accept all share a row on the tray and Customize sits below.

Performance

  • Only one view is mounted at a time: the question, or Saved.
  • The hold timer is cleared on unmount, and it waits while the preferences are open.
  • The panel inside Cookie Preferences mounts only when it opens.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import CookieBanner from @/components/fetaui/cookie-banner. It is fixed to the bottom of the page unless fixed={false}.
  • onChoose runs for every answer. Load optional cookies only after it, and store the answer yourself so it does not ask again.
  • If onChoose rejects, the banner stays on the question and shows failedMessage, so the visitor can answer again.
  • Set policyHref on compact, since it defaults to #. Composes Button and Cookie Preferences.
/docs/components/cookie-banner/markdown
PreviousCard Field
NextCookie Preferences

Related

Cookie PreferencesComponentChoose which optional cookies run. A popover on Web and a bottom sheet on Mobile.Consent CardComponentAsks once whether analytics may run, then folds to a one line confirmation.ToastComponentA short message that melts from a pill into a card. Eight kinds, with stacking and swipe.AlertComponentA callout that asks for attention without taking over the page. Card, Inline and Banner in six tones.SwitchComponentTurns a setting on or off and applies it at once.