KQ-845 · GROUP/STACK
Group Stack
A thread whose consecutive messages from one sender stack as a run: the gap inside a run is 2px and between runs 12px, so a bubble that joins a run tightens against the one above while the corners between them lose their radius. The run's disc renders once on its last message under a shared layoutId, sliding down on glide as the run grows; a new sender opens the gap and mounts a fresh disc with a pop on snap, and every arriving bubble rises on snap. Continuation messages carry a hidden sender prefix so each list item reads with its sender, and a status region speaks each arrival once.
- MartaGate 3 is open for the morning run.
- Marta: Two pallets for Fieldline, one for Coldbrook.
2 messages · 1 runs · last Marta ×2
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/group-stack
Props
- messages
- StackMessage[]
- default —
- The thread, oldest first: id, sender (a display name; runs are cut wherever it changes), text, and an optional formatted time shown under the last bubble of a run.
- self
- string
- default "You"
- The sender rendered as own messages, right-aligned and without a disc.
- label
- string
- default —
- Names the thread list for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| messages | StackMessage[] | — | The thread, oldest first: id, sender (a display name; runs are cut wherever it changes), text, and an optional formatted time shown under the last bubble of a run. |
| self | string | "You" | The sender rendered as own messages, right-aligned and without a disc. |
| label | string | — | Names the thread list for assistive technology. |