KQ-896 · FOLDER/TABS

Folder Tabs

Three folders over one channel list. A single pill keyed by a useId-prefixed layoutId glides between All, Unread and Mentions on snap, and the filter it applies re-lays the list beneath it: the rows that stay travel to their new places on glide, the rows that no longer match leave on the exit ease, and the box animates to a ResizeObserver-measured height so a folder holding one row closes to one row. Each tab's count is a strip of digits that rolls on snap; Left and Right move and activate the folders, Home and End jump.

KQ-896 · FOLDER/TABS

All 6 · Unread 2 · Mentions 1 · #dispatch open

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/folder-tabs

Props

channels: FolderChannel[]; default —; Rows to filter: id, name, preview, unread and mentions decide which folders show them.
value / defaultValue: FolderId; default "all"; Controlled or initial folder: all, unread or mentions.
onValueChange: (folder: FolderId) => void; default —; Fires from a tab press or an arrow key.
activeChannel / defaultActiveChannel: string; default —; Controlled or initial open channel id.
onChannelSelect: (id: string) => void; default —; Fires from a row press with the channel that was opened.
labels: Record<FolderId, string>; default —; Tab copy; defaults to All, Unread and Mentions.
emptyLabels: Record<FolderId, string>; default —; The sentence a folder shows when it holds nothing.
maxHeight: number; default 216; Pixels the list grows to before it scrolls inside its own box.
label: string; default —; Names the tablist and the list for assistive technology.

Prop	Type	Default	Description
channels	FolderChannel[]	—	Rows to filter: id, name, preview, unread and mentions decide which folders show them.
value / defaultValue	FolderId	"all"	Controlled or initial folder: all, unread or mentions.
onValueChange	(folder: FolderId) => void	—	Fires from a tab press or an arrow key.
activeChannel / defaultActiveChannel	string	—	Controlled or initial open channel id.
onChannelSelect	(id: string) => void	—	Fires from a row press with the channel that was opened.
labels	Record<FolderId, string>	—	Tab copy; defaults to All, Unread and Mentions.
emptyLabels	Record<FolderId, string>	—	The sentence a folder shows when it holds nothing.
maxHeight	number	216	Pixels the list grows to before it scrolls inside its own box.
label	string	—	Names the tablist and the list for assistive technology.