KQ-1158 · EDGE/TAB

Edge Tab

Notices wait as cards tucked behind the edge of a surface, only a peek of each showing as a tone-coloured index tab, stacked by urgency or time and gliding to new places when the order changes. A tab follows the finger 1:1 as it is pulled out and a release past half-way lands it in view on snap with the throw's velocity; pushed back, the card tucks in on glide, clicks into a slot at the bottom and its band drains as a snooze timer, then it wakes with a nudge on snap. Arrow keys move between tabs, Enter or the arrow away from the edge pulls one out and focuses it, Escape puts it back, the arrow toward the edge snoozes and Delete dismisses.

KQ-1158 · EDGE/TAB

Gaugeworks · Line monitor

Live

Line 1 · intake6.1 bar
Line 1 · outlet5.8 bar
Line 2 · intake6.4 bar
Line 2 · outlet6.0 bar
Line 3 · intake8.4 bar
Line 3 · outlet7.9 bar
Boiler · return71 °C

4 waiting · pull a tab

Open it on the Atelier stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/edge-tab

Props

notices: { id: string; title: string; body?: string; tone?: "info" | "success" | "warn" | "danger"; time?: string }[]; default —; The notices, oldest first. Each waits as a tab at the edge.
onDismiss: (id: string) => void; default —; Fires from the Done button or Delete, with the dismissed notice's id.
onSnooze: (id: string) => void; default —; Fires when a card is pushed back to the edge and its timer starts.
onOpenChange: (id: string | null) => void; default —; The card that came out, or null when it went back.
peek: number; default 16; How much of each tab shows, 8 to 32 px. The tone glyph shows from 22.
side: "left" | "right"; default "right"; The edge the tabs wait at. Drag direction and arrow keys mirror with it.
stack: "urgency" | "time"; default "urgency"; Order the tabs by urgency (danger first) or by time (newest first). Snoozed tabs sit below both.
snoozeFor: number; default 300; How long a pushed-back card sleeps, in seconds, shown as its band draining.
label: string; default "Notices"; The notice region's accessible name.
children: ReactNode; default —; The surface the tabs wait at the edge of. Cards are clipped to it.
sound: boolean; default false; Play a swish when the visitor pulls a card out or dismisses it, and a click when a snoozed card latches.
disabled: boolean; default false; Tabs can be read but not pulled, snoozed or dismissed.
className: string; default —; Classes for the root, which is the surface's box.

Prop	Type	Default	Description
notices	{ id: string; title: string; body?: string; tone?: "info" \| "success" \| "warn" \| "danger"; time?: string }[]	—	The notices, oldest first. Each waits as a tab at the edge.
onDismiss	(id: string) => void	—	Fires from the Done button or Delete, with the dismissed notice's id.
onSnooze	(id: string) => void	—	Fires when a card is pushed back to the edge and its timer starts.
onOpenChange	(id: string \| null) => void	—	The card that came out, or null when it went back.
peek	number	16	How much of each tab shows, 8 to 32 px. The tone glyph shows from 22.
side	"left" \| "right"	"right"	The edge the tabs wait at. Drag direction and arrow keys mirror with it.
stack	"urgency" \| "time"	"urgency"	Order the tabs by urgency (danger first) or by time (newest first). Snoozed tabs sit below both.
snoozeFor	number	300	How long a pushed-back card sleeps, in seconds, shown as its band draining.
label	string	"Notices"	The notice region's accessible name.
children	ReactNode	—	The surface the tabs wait at the edge of. Cards are clipped to it.
sound	boolean	false	Play a swish when the visitor pulls a card out or dismisses it, and a click when a snoozed card latches.
disabled	boolean	false	Tabs can be read but not pulled, snoozed or dismissed.
className	string	—	Classes for the root, which is the surface's box.