components / shelf

shelf.

horizontally scrolling row of cards — the browsable counterpart to gallery's searchable grid. arrows appear only once the row genuinely overflows (measured, not assumed) and disable at their end; scrolling stays native, so trackpad, touch and keyboard all work untouched.

playlists

late shift

12 tracks

rain on the window

16 tracks

second coffee

20 tracks

the long way round

24 tracks

nothing at all

28 tracks

closing up

32 tracks

four in the morning

36 tracks

walk it off

40 tracks

wider items, no snap

late shift

rain on the window

second coffee

the long way round

nothing at all

the arrows only exist while the row overflows — narrow the window and watch them appear.

installation

bunx @justin06lee/chrome@latest add shelf

props

name	type	default	description
children *	ReactNode	-	the cards; each is given itemWidth and made unshrinkable.
title	ReactNode	-	mono uppercase heading above the row.
action	ReactNode	-	right-hand slot on the title line — a 'see all' link, a count.
itemWidth	number	176	width of each item in px.
gap	number	16
arrows	boolean	true	paging buttons, shown only when the row overflows.
snap	boolean	true	snap each item to the left edge as you scroll.
ariaLabel	string	-	accessible name for the scroll region; falls back to title when it's a string.
className	string	-