KQ-696 · SESSION/LIST
Session List
A list of signed-in sessions where the one reading the list breathes: its chip's dot wears a halo that swells and settles on drift, mirrored, resting while the tab is hidden. Signing one out slides the row aside by a shift while its measured height closes on the exit ease, so the rows below glide up; signing out all cascades the exits top to bottom on cascade(), the order carried through AnimatePresence's custom to rows already removed. Every Sign out is a real button named after its device.
KQ-696 · SESSION/LIST
Basinworks Exchange4sessions
- Waylight laptopLisbon · nowThis device
- Coldbrook phonePorto · 2 h ago
- Fieldline tabletLisbon · yesterday
- Gaugeworks laptopMadrid · 3 d ago
4 sessions · 3 other
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/session-list
Props
- sessions
- SessionItem[]
- default —
- { id, device, kind: "phone" | "laptop" | "tablet", place, seen, current? } — the host owns the list.
- onSignOut
- (id: string) => void
- default —
- Fires from the row's button; the host removes the session and the row leaves.
- onSignOutAll
- (ids: string[]) => void
- default —
- Fires from the footer with every non-current id; their rows leave in a cascade.
- label
- ReactNode
- default —
- List heading.
- currentLabel
- string
- default "This device"
- Chip text on the live row.
- signOutAllLabel
- string
- default "Sign out all other sessions"
- Footer control.
| Prop | Type | Default | Description |
|---|---|---|---|
| sessions | SessionItem[] | — | { id, device, kind: "phone" | "laptop" | "tablet", place, seen, current? } — the host owns the list. |
| onSignOut | (id: string) => void | — | Fires from the row's button; the host removes the session and the row leaves. |
| onSignOutAll | (ids: string[]) => void | — | Fires from the footer with every non-current id; their rows leave in a cascade. |
| label | ReactNode | — | List heading. |
| currentLabel | string | "This device" | Chip text on the live row. |
| signOutAllLabel | string | "Sign out all other sessions" | Footer control. |