KQ-837 · DISCLAIMER/BAR

Disclaimer Bar

A disclaimer that arrives with the first answer as a full-width bar and, when the second answer lands, shrinks to a dot at the row's start: one button whose width and height glide to a 28px circle on glide while the text fades on a fast tween. Hovering or focusing the dot peeks the bar open on snap and leaving folds it again; pressing pins it open, pressing the open bar folds it, and Escape folds a pinned bar.

KQ-837 · DISCLAIMER/BAR

No answer yet

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/disclaimer-bar

Props

text: string; default —; The disclaimer, one or two short sentences.
answers: number; default 0; Answers given so far: 0 keeps the bar away, 1 shows it, 2 or more fold it to the dot.
open / defaultOpen: boolean; default —; Controlled or initial pin: true holds the bar open past its fold, false holds it folded; omitted, the bar follows answers.
onOpenChange: (open: boolean) => void; default —; Fires from a press or Escape with the new pin.
onPeekChange: (peeking: boolean) => void; default —; Fires as hover or focus peeks the folded bar open and closed.
label: string; default "Disclaimer"; Names the folded dot for assistive technology.

Prop	Type	Default	Description
text	string	—	The disclaimer, one or two short sentences.
answers	number	0	Answers given so far: 0 keeps the bar away, 1 shows it, 2 or more fold it to the dot.
open / defaultOpen	boolean	—	Controlled or initial pin: true holds the bar open past its fold, false holds it folded; omitted, the bar follows answers.
onOpenChange	(open: boolean) => void	—	Fires from a press or Escape with the new pin.
onPeekChange	(peeking: boolean) => void	—	Fires as hover or focus peeks the folded bar open and closed.
label	string	"Disclaimer"	Names the folded dot for assistive technology.