KQ-894 · PINNED/BAR

Pinned Bar

The strip above the thread, holding everything pinned to it. One note shows at a time and pressing the bar cycles to the next with a slide in the direction of travel on snap, under AnimatePresence popLayout so the outgoing line leaves the flow while the incoming one sets the height a ResizeObserver hands the strip to glide to. The active tick travels its rail on a layoutId and the index digit rolls; unpinning fades the line out on the exit ease and collapses the strip, to nothing at all when the last pin goes.

KQ-894 · PINNED/BAR

pin 1 of 3 · Ines Moreau

Install

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

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

Props

pins: PinnedNote[]; default —; What the bar holds, most recently pinned first: id, author, text and a preformatted time.
index / defaultIndex: number; default 0; Controlled or initial index of the pin on show; clamped for display whenever the array shrinks.
onIndexChange: (index: number) => void; default —; Fires from the body press and the arrow keys.
onUnpin: (id: string) => void; default —; Fires from the unpin control or Delete; the host removes the note.
onAnnounce: (sentence: string) => void; default —; Fires once per frozen change sentence, for a parent's own status line.
label: string; default "Pinned"; Names the bar for assistive technology.
emptyLabel: string; default —; A word for the empty bar; unset, the bar collapses to nothing.

Prop	Type	Default	Description
pins	PinnedNote[]	—	What the bar holds, most recently pinned first: id, author, text and a preformatted time.
index / defaultIndex	number	0	Controlled or initial index of the pin on show; clamped for display whenever the array shrinks.
onIndexChange	(index: number) => void	—	Fires from the body press and the arrow keys.
onUnpin	(id: string) => void	—	Fires from the unpin control or Delete; the host removes the note.
onAnnounce	(sentence: string) => void	—	Fires once per frozen change sentence, for a parent's own status line.
label	string	"Pinned"	Names the bar for assistive technology.
emptyLabel	string	—	A word for the empty bar; unset, the bar collapses to nothing.