Popups und Consent

Details

Was Popups und Einwilligung mitbringt, aus Registry und Quellcode gelesen.

Bereich

Marketing

Variants

7

Version

1.0.0 · seit 1.0.0

Datei

components/ui/popup.tsx

Bringt mit

utilskitbuttonicon

npm-Pakete

Keine

Sprachen

Englisch und Deutsch, 22 eigene Texte

Studio

Alle 7 Variants bearbeitbar

Mit KI bauen

Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle PopupProps aus components/ui/popup.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

• 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

Eingebaute Texte

Diese Texte schreibt Popups und Einwilligung selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.