KQ-915 · WARN/STRIP

Warn Strip

A content warning that is a door, not a fog. A warned message renders as a bubble that is entirely strip, carrying the reason in words and a Show control, and pressing it lowers the strip by its own height on glide while the box glides in the same beat to a ResizeObserver-measured message height — the strip does not vanish, it goes down and the words are what is left. The line it casts thins on a tween as it drops, and the Show and Cover controls hand focus to each other.

KQ-915 · WARN/STRIP

Ines Moreau, 07:52.
Dock two is loaded. Pallet 4471 still held.
Rui Baptista, 08:12, covered by a caution.
Caution: strong words about a driver
Ines Moreau, 08:20.
Keep it to the pallet, Rui. Room rule 3.
Marta Ferreira, 08:31, covered by a caution.
Caution: photo of a damaged pallet
Ines Moreau, 08:40.
Waylight Pay cleared it. Dock three at nine.

2 cautions · nothing showing

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/warn-strip

Props

messages: WarnMessage[]; default —; The thread, oldest first; a message with a caution is covered by a strip.
shown / defaultShown: string[]; default []; Controlled or initial ids whose strips are down.
onShownChange: (ids: string[]) => void; default —; Fires with the next set from either direction.
onShow: (id: string) => void; default —; Fires when a strip is lowered.
onCover: (id: string) => void; default —; Fires when a strip is raised again.
showLabel: string; default "Show message"; The strip's control.
coverLabel: string; default "Cover"; The meta row's control, which appears once the strip is down.
cautionLead: string; default "Caution"; The word before the reason, on the strip and in the control's name.
maxHeight: number; default 300; Tallest the thread grows before it scrolls inside its own box.
label: string; default —; Names the thread for assistive technology.

Prop	Type	Default	Description
messages	WarnMessage[]	—	The thread, oldest first; a message with a caution is covered by a strip.
shown / defaultShown	string[]	[]	Controlled or initial ids whose strips are down.
onShownChange	(ids: string[]) => void	—	Fires with the next set from either direction.
onShow	(id: string) => void	—	Fires when a strip is lowered.
onCover	(id: string) => void	—	Fires when a strip is raised again.
showLabel	string	"Show message"	The strip's control.
coverLabel	string	"Cover"	The meta row's control, which appears once the strip is down.
cautionLead	string	"Caution"	The word before the reason, on the strip and in the control's name.
maxHeight	number	300	Tallest the thread grows before it scrolls inside its own box.
label	string	—	Names the thread for assistive technology.