KQ-530 · CONSENT/SLAB

Consent Slab

A consent slab that rises from the bottom of its frame on glide. Customise measures its own panel with a ResizeObserver and unfolds to exactly that height, with the necessary category locked on; a decision stamps into the button row and the slab sinks on the exit ease, leaving a Preferences chip to bring it back. It is a labelled region rather than a dialog, and each category is a switch with aria-checked that Enter or Space drives.

KQ-530 · CONSENT/SLAB

BasinworksGroundwater records, 1974 onward

Your data choices

This site keeps what it needs to run. Everything else is yours to allow or refuse.

NecessarySession and security. Always on.

AnalyticsWhich pages get read, counted in aggregate.

PersonalisationRemembers your units and column layout.

MarketingMeasures campaigns run off site.

Awaiting a choice

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/consent-slab

Props

categories: ConsentCategory[]; default —; Consent categories with a label and a blurb; mark the ones the product cannot run without as locked.
onDecision: (granted: string[]) => void; default —; Fires with every granted id, locked categories included.
open / defaultOpen: boolean; default true; Controlled or initial slab state; the Preferences chip re-raises it.
onOpenChange: (open: boolean) => void; default —; Fires when the slab rises or sinks, so a controlled parent can follow the stamp.

Prop	Type	Default	Description
categories	ConsentCategory[]	—	Consent categories with a label and a blurb; mark the ones the product cannot run without as locked.
onDecision	(granted: string[]) => void	—	Fires with every granted id, locked categories included.
open / defaultOpen	boolean	true	Controlled or initial slab state; the Preferences chip re-raises it.
onOpenChange	(open: boolean) => void	—	Fires when the slab rises or sinks, so a controlled parent can follow the stamp.