KQ-891 · CHANNEL/LIST

Channel List

The rooms you are in, ordered by what just happened in them. Rows carry layout, so a room that receives a message climbs and every row it passes trades places on glide, while the badge replays a landing from scale 1.18 on recoil and muted rows dim to a hollow badge that still shows its count. The list is one tab stop: Down and Up step rows, Home and End jump to the ends, Right moves to the row's bell and Left comes back.

KQ-891 · CHANNEL/LIST

Coldbrook yard · 8 unread · 2 muted

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/channel-list

Props

channels: Channel[]; default —; The rooms. Each carries an id, name, optional preview, unread count, an activity rank and a muted flag.
value / defaultValue: string; default —; Controlled or initial id of the open room; the default is the most active one.
onValueChange: (id: string) => void; default —; Fires from a row's click, Enter or Space.
onMuteToggle: (id: string, muted: boolean) => void; default —; Fires from a row's bell with the state the host should store.
onAnnounce: (sentence: string) => void; default —; Fires once per frozen change sentence, for a parent's own status line.
label: string; default —; Names the list for assistive technology.
maxHeight: number; default 280; Tallest the list grows before it scrolls inside its own box.
emptyLabel: string; default "No rooms yet"; Drawn when there are no rooms.

Prop	Type	Default	Description
channels	Channel[]	—	The rooms. Each carries an id, name, optional preview, unread count, an activity rank and a muted flag.
value / defaultValue	string	—	Controlled or initial id of the open room; the default is the most active one.
onValueChange	(id: string) => void	—	Fires from a row's click, Enter or Space.
onMuteToggle	(id: string, muted: boolean) => void	—	Fires from a row's bell with the state the host should store.
onAnnounce	(sentence: string) => void	—	Fires once per frozen change sentence, for a parent's own status line.
label	string	—	Names the list for assistive technology.
maxHeight	number	280	Tallest the list grows before it scrolls inside its own box.
emptyLabel	string	"No rooms yet"	Drawn when there are no rooms.