Skip to content
Aback UI

Block ยท Application

Cookie consent

A non-blocking consent banner with equally prominent accept and decline, remembered per browser.

Beta1 componentRegistry JSON (opens in a new tab)
the Cookie consent preview in a new tab

Desktop at 1280 pixels. The frame scrolls when the block is taller than 900 pixels. Example data is labelled inside the preview.

Installation

One item installs the block and every component it imports.

npx aback-ui@latest add cookie-consent

The block lands at components/blocks/cookie-consent.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows. Blocks are copied with the CLI; they are not part of the npm package.

Built from

The registry installs these components with the block.

What to customize

  • Load optional scripts only after onDecision("accepted"). The block decides nothing for you.
  • Write message plainly: what you ask for, and what happens if the visitor declines.
  • The choice is stored under storageKey. Give people a way to change it later, such as a link on your cookie policy page that clears the key.
  • Check the rules where you operate. This block is a pattern, not legal advice or a consent management platform.

Accessibility

  • It is a labelled region, not a modal: no focus trap, no overlay, no scroll lock, so the page stays usable.
  • Accept and decline are real buttons of equal size, so declining is as easy as accepting.
  • The server render shows nothing, so a visitor who already chose never sees a flash of the banner.