KQ-863 · THREAD/OPEN

Thread Open

A thread whose side conversations open beside it. Pressing a message's reply count slides a panel in from the right edge of the component's own frame on glide while a scrim fades the thread behind it and the replies cascade in from eight pixels below on snap at cascade(count). The panel is modal within the frame: Tab cycles inside it, Escape closes, and closing folds it back on the exit ease and returns focus to the count control that opened it.

KQ-863 · THREAD/OPEN

Marta07:12
Gate B is clear from eight. Two pallets for the Basinworks run and one loose crate that never got a label.
Rui07:26
Waylight Pay wants the run signed for by ten.
You07:31
I will take the signature at the gate.

thread closed · 3 messages · 4 replies

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/thread-open

Props

messages: ThreadMessage[]; default —; The thread, oldest first; a message's replies are its side conversation.
openId / defaultOpenId: string | null; default null; Controlled or initial id of the message whose panel is open.
onOpenIdChange: (id: string | null) => void; default —; Fires from a count press, Escape, the close control and the scrim.
onReply: (parentId: string, text: string) => void; default —; Fires from Enter or Send in the panel with the trimmed text.
placeholder: string; default "Reply in thread"; The panel composer's placeholder.
label: string; default —; Names the thread list for assistive technology.

Prop	Type	Default	Description
messages	ThreadMessage[]	—	The thread, oldest first; a message's replies are its side conversation.
openId / defaultOpenId	string \| null	null	Controlled or initial id of the message whose panel is open.
onOpenIdChange	(id: string \| null) => void	—	Fires from a count press, Escape, the close control and the scrim.
onReply	(parentId: string, text: string) => void	—	Fires from Enter or Send in the panel with the trimmed text.
placeholder	string	"Reply in thread"	The panel composer's placeholder.
label	string	—	Names the thread list for assistive technology.