KQ-652 · BLOCK/STREAM

Block Stream

A rail of blocks that fills from the right: a new block enters from a shift beyond the right edge on snap while the tiles already on the rail slide one place left under a layout animation on glide, and the tile pushed off the end leaves on the exit ease. Each tile carries its height, its transaction count, and a fullness bar that extends on glide. Pointing at the rail or focusing any tile holds the stream through onPauseChange, and tiles are buttons on a roving tabindex where Left and Right step, Home and End jump, and Enter pins a tile's detail.

KQ-652 · BLOCK/STREAM

Basin ledger

Head 812443 · stopped · 1434 tx

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/block-stream

Props

blocks: StreamBlock[]; default —; Blocks oldest first; the newest sits at the right of the rail.
max: number; default 5; Tiles kept on the rail; older ones leave to the left.
capacity: number; default 2400; Transactions a full block holds; sets each fullness bar.
paused: boolean; default false; Host-driven hold, OR-ed with the pointer and focus hold.
onPauseChange: (paused: boolean) => void; default —; Fires from the pointer or focus event that changed the hold.
onSelect: (block: StreamBlock | null) => void; default —; Fires from the press that pins or unpins a tile.
format: (value: number) => string; default Intl.NumberFormat, grouped; Formats heights and transaction counts.
announce: boolean; default true; Announces each settled block politely; turn it off in a busy page.
label: string; default "Block stream"; Names the rail for assistive technology.
emptyLabel: string; default "No blocks yet."; Shown while the rail is empty.

Prop	Type	Default	Description
blocks	StreamBlock[]	—	Blocks oldest first; the newest sits at the right of the rail.
max	number	5	Tiles kept on the rail; older ones leave to the left.
capacity	number	2400	Transactions a full block holds; sets each fullness bar.
paused	boolean	false	Host-driven hold, OR-ed with the pointer and focus hold.
onPauseChange	(paused: boolean) => void	—	Fires from the pointer or focus event that changed the hold.
onSelect	(block: StreamBlock \| null) => void	—	Fires from the press that pins or unpins a tile.
format	(value: number) => string	Intl.NumberFormat, grouped	Formats heights and transaction counts.
announce	boolean	true	Announces each settled block politely; turn it off in a busy page.
label	string	"Block stream"	Names the rail for assistive technology.
emptyLabel	string	"No blocks yet."	Shown while the rail is empty.