Cookie

A cookie consent card with accept and decline actions. It lifts in once and lifts away on a choice.

Dependencies

motion

Interaction Type

Choose Accept all or Decline. The card fades and lifts away, and both choices call back before closing.

Props

Options you can pass to customize this component.

Prop

Type

Description

title

ReactNode

Heading text.

description

ReactNode

Supporting copy.

acceptLabel

string

Accept button label.

declineLabel

string

Decline button label.

onAccept

() => void

Called when the visitor accepts.

onDecline

() => void

Called when the visitor declines.

open

boolean

Controlled open state.

defaultOpen

boolean

Initial open state. Defaults to true.

onOpenChange

(open: boolean) => void

Called when the card closes.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/banner-cookie.json

How to use

<BannerCookie
  onAccept={() => setConsent('all')}
  onDecline={() => setConsent('essential')}
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

acme.app

We use cookies

Cookies keep the site working and help us understand how it is used. You can change your choice at any time.

npx shadcn@latest addhttps://ui.nexvyn.dev/r/banner-cookie.json