Consent Card

A glass card in the corner that asks once whether analytics may set cookies, with Decline and Accept. The answer is remembered and passed to you to load or drop your analytics; open it again from a Cookies button.

Steps for Next.js.

1
Install the package
One package carries every component and its effects, all original code.
bun add @poulo2/ai-components
2
Load the styles with Tailwind v4
Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.
@import "@poulo2/ai-components/theme.css"; @source "../node_modules/@poulo2/ai-components/dist";
3
Or load the prebuilt stylesheet
For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.
import "@poulo2/ai-components/styles.css";

Name	Type	Default	Description
onAnswer	(consent: "granted" \| "denied") => void	—	Called with the visitor's answer.
open	boolean	—	Shows the card, when you control it. Unset, it shows until the visitor has answered once.
title	ReactNode	"Cookies"	The card's heading.
description	ReactNode	—	What you ask.
acceptLabel	string	"Accept"	The accept button.
declineLabel	string	"Decline"	The decline button.
storageKey	string	"consent"	Where the answer is remembered in localStorage.
position	"fixed" \| "absolute"	"fixed"	Fixed to the screen's corner, or placed in a positioned container.
className	string	—	Classes for the root element.

Install

Install the package

Load the styles with Tailwind v4

Or load the prebuilt stylesheet

Props

Install

Install the package

Load the styles with Tailwind v4

Or load the prebuilt stylesheet

Props