Analytics
Analytics and masked session replay help us improve this site.
A consent notice with accept and reject actions. The optional close button only dismisses the notice; your app decides whether to save a choice and when to show the banner again.
Installation
Add the consent-banner component from Hangry UI to this project.
Use the project's package manager to run:shadcn@latest add https://ui.razeev.com/r/consent-banner.json
Integrate the component with the existing layout and styling.Keep its interactions and reduced-motion support intact.How to use
import { ConsentBanner } from "@/components/hangry-ui/components/consent-banner";
<ConsentBanner className="fixed bottom-5 left-5 z-50" onAccept={() => saveAnalyticsChoice("accepted")} onReject={() => saveAnalyticsChoice("rejected")} onDismiss={() => setBannerOpen(false)}/>;Save and apply the choice in your own analytics integration. Hide the banner after a choice is made. Dismissal does not call onAccept or onReject.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
onAccept | () => void | Required | Called when analytics is accepted. |
onReject | () => void | Required | Called when analytics is rejected. |
onDismiss | () => void | — | Shows a close button and handles dismissal. |
title | string | Analytics | Notice heading. |
description | string | Built-in message | Explanatory text below the heading. |
className | string | Empty | Additional classes, including positioning. |
Dependencies
- lucide-react