KQ-819 · RECENT/RAIL

Recent Rail

A rail of recent conversations, newest first. Rows slide in from a step away on snap in a cascade — on mount, and again when a new conversation lands at the top while the rows beneath travel down with layout on glide and the one past the limit fades out at the bottom, the rail's measured height gliding to fit. The active row glows: a shared layoutId plate travels to it on snap and a bloom behind it arrives on flick and settles to a soft rest on drift. Renaming edits in place, the title swapping for an input at the same height, and the new title cross-fades in.

KQ-819 · RECENT/RAIL

Recent

Active · Refund for a Waylight Pay order

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/recent-rail

Props

items: RecentItem[]; default —; Newest first — id, title and a short age label the host supplies, never read from a clock; the host owns the list.
max: number; default 6; Rows the rail shows; the one pushed past it fades out at the bottom.
value / defaultValue: string; default —; Controlled or initial active conversation; defaults to the first item.
onValueChange: (id: string) => void; default —; Fires from the click or key that opened a conversation.
onRename: (id: string, title: string) => void; default —; Fires from a committed rename with a non-empty, changed title.
label: string; default —; Names the rail for assistive technology and prints as its heading.

Prop	Type	Default	Description
items	RecentItem[]	—	Newest first — id, title and a short age label the host supplies, never read from a clock; the host owns the list.
max	number	6	Rows the rail shows; the one pushed past it fades out at the bottom.
value / defaultValue	string	—	Controlled or initial active conversation; defaults to the first item.
onValueChange	(id: string) => void	—	Fires from the click or key that opened a conversation.
onRename	(id: string, title: string) => void	—	Fires from a committed rename with a non-empty, changed title.
label	string	—	Names the rail for assistive technology and prints as its heading.