KQ-899 · SECTION/COLLAPSE

Section Collapse

A sidebar of sections that fold their own rooms. A header press joins the body to zero on glide against a height a ResizeObserver measured from the body's own content, the caret turns a quarter on snap, and the rows fade on a tween rather than sliding. What the fold hides comes back to the header: the unread inside rises into a badge from 4px on snap with its digits rolling, and unfolding drops it on the exit ease; Down and Up move between headers while Home and End jump.

KQ-899 · SECTION/COLLAPSE

Rooms open · Direct folded · Muted open · 1 unread hidden

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/section-collapse

Props

sections: RoomSection[]; default —; Each section is an id, a title and its channels; a channel carries an unread count and direct or muted marks.
open / defaultOpen: string[]; default every section; Controlled or initial ids of the unfolded sections.
onOpenChange: (id: string, open: boolean) => void; default —; Fires from the press or key that folded or unfolded a section.
activeChannel / defaultActiveChannel: string; default —; Controlled or initial selected channel id.
onChannelSelect: (id: string) => void; default —; Fires from a row press with the channel that was opened.
emptyLabel: string; default "No rooms in here yet."; The sentence shown inside a section that holds no channels.
label: string; default —; Names the whole sidebar for assistive technology.

Prop	Type	Default	Description
sections	RoomSection[]	—	Each section is an id, a title and its channels; a channel carries an unread count and direct or muted marks.
open / defaultOpen	string[]	every section	Controlled or initial ids of the unfolded sections.
onOpenChange	(id: string, open: boolean) => void	—	Fires from the press or key that folded or unfolded a section.
activeChannel / defaultActiveChannel	string	—	Controlled or initial selected channel id.
onChannelSelect	(id: string) => void	—	Fires from a row press with the channel that was opened.
emptyLabel	string	"No rooms in here yet."	The sentence shown inside a section that holds no channels.
label	string	—	Names the whole sidebar for assistive technology.