Cookie Banner

Fixed consent banner. Hidden until the client confirms localStorage has no stored choice (SSR-safe). Accept and Reject persist that choice and emit. Use a unique storageKey per site.

freenew

Demo

This preview uses a dedicated storage key so it does not collide with a production banner. Reset to show it again.

Last choice: none

HTML

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add cookie-banner

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add cookie-banner
// Paths are relative to aliases.components (default: src/app/components)
import { CookieBannerComponent } from './cookie-banner/cookie-banner.component';

@Component({
  selector: 'app-your-component',
  imports: [
    CookieBannerComponent
  ],
  template: `...`
})
export class YourComponent {}

API for cookie-banner — generated from JSDoc in the library source.

API reference for cookie-banner
API	Member	Type	Default	Description
`base-cookie-banner`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`base-cookie-banner`	`storageKey`	`unknown`	`'base-cookie-consent'`	`localStorage` key used to remember the choice.
`base-cookie-banner`	`title`	`unknown`	`'We use cookies'`	Heading shown beside the cookie icon.
`base-cookie-banner`	`message`	`unknown`	`'We use cookies to remember your theme and keep the docs working. You can reject non-essential cookies.'`	Supporting copy under the title.
`base-cookie-banner`	`acceptLabel`	`unknown`	`'Accept'`	Label for the accept button.
`base-cookie-banner`	`rejectLabel`	`unknown`	`'Reject'`	Label for the reject button.
`base-cookie-banner`	`policyHref`	`string`	`''`	Optional privacy policy URL. Hidden when empty.
`base-cookie-banner`	`policyLabel`	`unknown`	`'Privacy policy'`	Label for the privacy policy link.
`base-cookie-banner`	`(accepted)`	`void`	—	Emitted after the user accepts (and the choice is stored).
`base-cookie-banner`	`(rejected)`	`void`	—	Emitted after the user rejects (and the choice is stored).
`base-cookie-banner`	`(consentChange)`	`CookieConsent`	—	Emitted with the stored consent value after accept, reject, or a successful reset.