Popups and consent

Native dialogs with a focus trap and Escape, a consent bar with settings and a toast stack.

7 variants

Switch category

Cookie consent

A bar with equal choices and a settings dialog with a switch per category.

Open in Studio

Newsletter dialog

Picture and sign-up side by side, the picture steps aside on phones.

Open in Studio

Offer

A ticket with a big number, a code to copy and one button.

Open in Studio

Announcement

What is new, with a picture and a short list.

Open in Studio

Exit intent

Opens when the pointer leaves the page, once per session.

Open in Studio

Confirmation

A destructive action as an alert dialog, unlocked by typing the name.

Open in Studio

Toast stack

Stacked notifications that fan out on hover or focus.

Open in Studio

Details

What Popups and consent brings along, read from the registry and the source.

Area: Marketing
Variants: 7
Version: 1.0.0 · since 1.0.0
File: components/ui/popup.tsx
Brings along: utilskitbutton icon
npm packages: None
Languages: English and German, 22 texts of its own
Studio: All 7 variants editable
Build with AI: Over MCP in Claude, Cursor, Copilot and Codex

Props

The PopupProps interface from components/ui/popup.tsx, with the comments from the code.

variantoptional
PopupVariant
cookie-consentnewsletter-modalofferannouncementexit-intentconfirmationtoast-stack
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
defaultOpenoptional
boolean
Open on load. Server rendered open too, so the content is there without JavaScript.
triggerLabeloptional
string
Renders a button that opens the dialog (or adds a toast)
mediaoptional
React.ReactNode
A picture: side of newsletter-modal, top of announcement and exit-intent
tagoptional
string
Small label above the title
actionoptional
PopupAction
secondaryActionoptional
PopupAction
categoriesoptional
ConsentCategory[]
cookie-consent: the switches in the settings dialog
onConsentoptional
(choices: Record<string, boolean>) => void
cookie-consent: called with every category and its state
policyoptional
{ label: string; href: string }
cookie-consent: privacy policy link
onSubscribeoptional
(email: string) => void | Promise<void>
newsletter-modal, exit-intent: called with the email
noteoptional
React.ReactNode
newsletter-modal, exit-intent: small print under the form
valueoptional
string
offer: the big number and the code
codeoptional
string
itemsoptional
{ icon: IconName; title: string; text?: string }[]
announcement: what is new
confirmTextoptional
string
confirmation: the word to type before the action unlocks, e.g. the project name
onConfirmoptional
() => void
toastsoptional
ToastItem[]
toast-stack: the toasts on screen and the one the trigger adds
durationoptional
number
toast-stack: closes each toast after so many milliseconds

Built-in texts

Popups and consent writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 22 texts

Key	English	German
close	English Close	German Schließen
acceptAll	English Accept all	German Alle akzeptieren
rejectAll	English Reject all	German Alle ablehnen
settings	English Settings	German Einstellungen
save	English Save choices	German Auswahl speichern
alwaysOn	English Always on	German Immer aktiv
cookies	English Privacy settings	German Datenschutz-Einstellungen
email	English Email address	German E-Mail-Adresse
placeholder	English you@example.com	German du@beispiel.de
subscribe	English Subscribe	German Abonnieren
sending	English Sending	German Wird gesendet
invalid	English Please enter a full email address.	German Bitte gib eine vollständige E-Mail-Adresse ein.
failed	English That did not work. Please try again.	German Das hat nicht geklappt. Bitte versuch es noch einmal.
done	English Check your inbox to confirm. Thank you!	German Bitte bestätige im Postfach. Danke dir!
noThanks	English No thanks	German Nein, danke
copy	English Copy	German Kopieren
copied	English Copied	German Kopiert
cancel	English Cancel	German Abbrechen
confirm	English Delete	German Löschen
typeToConfirm	English Type {text} to confirm	German Zum Bestätigen {text} eingeben
notifications	English Notifications	German Benachrichtigungen
dismiss	English Dismiss	German Ausblenden

Read from the source of the component.

Popups and consent handles the keys Delete itself.
Built on the native dialog element. The browser keeps focus inside and closes it with Escape.
Sets aria-describedby, aria-invalid, aria-label, aria-labelledby and aria-live, so screen readers announce purpose and state.
Uses the roles alert, alertdialog, region, role, status and switch.
Announces changes through a live region without moving focus.
Every field has a label, visible or for screen readers.
Shows a visible focus ring when used with the keyboard.
The server renders the starting state in full, JavaScript only adds the interaction.

Motion

Rises in briefly the first time it comes into view (kit-rise, useInView).
Moves with the scroll, its progress follows the position on the page.
Brings animations of its own, calmly timed and without wobble.
With reduced motion (prefers-reduced-motion) it stays still. 8 places in the code switch motion off then.

Frequent questions

How do I install Popups and consent?

With aiw add @ai-website/popup. The command puts components/ui/popup.tsx into your project, the code is yours from then on. It brings along button and icon. It needs no further npm packages.

Which variants does Popups and consent have?

7 variants, Cookie consent, Newsletter dialog, Offer, Announcement, Exit intent, Confirmation and Toast stack. You pick one with the variant prop, for example variant="newsletter-modal".

Can I translate the texts of Popups and consent?

Yes. Popups and consent carries 22 texts of its own in English and German, such as “Close”, “Accept all” and “Reject all”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Popups and consent?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Popups and consent with aiw_components and install it with aiw_add @ai-website/popup. Name the variant in your prompt, for example variant="cookie-consent", and the assistant writes your content straight into the props.

Can I adjust Popups and consent without code?

Yes, in the Studio. All 7 variants are editable there, texts, lists and switches. The Studio writes the matching Popup code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Popups and consent on a page.