Kinetiq

KQ-576 · LIVE/ROWS

Live Rows

A live feed that keeps its feet. A row arrives from a step above and glides the rest of the list down on the glide spring — a layout move, so the rows below travel rather than jump — while a cobalt wash drains off the new row and is cool by the time the next one lands; rows pushed past max fade and collapse on the exit ease. The list holds while a pointer is over it or the keyboard is inside it, so arrivals queue and land together on release, and Tab reaches anything a row contains without the feed moving underneath.

KQ-576 · LIVE/ROWS
Coldbrook tapeHeld

    No trades yet. Start the feed.

    Rows 0 · Stopped

    Install

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

    $ pnpm dlx shadcn@latest add @kinetiq/live-rows

    Props

    items
    { id: string; content: React.ReactNode }[]
    default —
    Rows, newest first. Ids must be stable — the row travels on its key rather than remounting.
    max
    number
    default 6
    Rows kept on screen; anything past it collapses out on the exit ease.
    paused
    boolean
    default false
    Holds the list from outside: arrivals wait, removals still land.
    label
    string
    default "Feed"
    Names the log region and titles the header beside the live indicator.
    emptyLabel
    string
    default "Nothing yet."
    Read in place of the rows while the feed is empty.
    onHoldChange
    (held: boolean) => void
    default —
    Fires when a pointer or a focus enters and leaves the list, so a host can narrate the hold.