KQ-1177 · JUKEBOX/MENU

Jukebox Menu

A single-choice picker dressed as a jukebox: the catalogue sits on title strips in a book-style rack whose leaves turn about the spine on glide, riffling a leaf at a time across several pages, and every record has a letter-and-number code. A pick sends the changer arm round the fan of edge-on records on glide while its motor whirs, reaches in and grips the record, pulls it down to the spindle as it turns from edge-on to lying flat, and drops it on the platter on recoil before the tonearm swings on with snap. Under the chrome it is a listbox: arrows walk the strips and turn pages at the ends, Page keys turn a spread, a page letter and a strip number pick by code, and Enter picks the active strip.

KQ-1177 · JUKEBOX/MENU

Now playingA2Lanterns on the Weir

now playing A2 · Lanterns on the Weir · The Coldbrook Five

Open it on the Atelier stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/jukebox-menu

Props

records: { id: string; title: string; artist?: string }[]; default —; The catalogue, in rack order. Each record gets a code from its page letter and strip number.
value / defaultValue: string | null; default null; The id of the record on the turntable, controlled or initial.
onValueChange: (id: string) => void; default —; Fires from the strip, key or code that picked a record, with its id.
label: string; default "Records"; The listbox's accessible name.
pages: number; default 2; How many pages the rack splits the catalogue across, 2 to 4; a page holds up to eight strips, and a longer catalogue adds pages.
finish: "gold" | "silver" | "candy"; default "gold"; The cabinet's trim, rack frame and key tops, as pigments that read the same in both themes.
arm: boolean; default true; A changer arm fetches each record; off, the record rises from its slot and travels to the turntable by itself.
sound: boolean; default false; Clack for keys, strips and landings, and a whir while the arm travels. Only for the visitor's own picks and keys.
disabled: boolean; default false; The rack and keys can be read but not used.
className: string; default —; Classes for the cabinet, which is w-full up to 360px.

Prop	Type	Default	Description
records	{ id: string; title: string; artist?: string }[]	—	The catalogue, in rack order. Each record gets a code from its page letter and strip number.
value / defaultValue	string \| null	null	The id of the record on the turntable, controlled or initial.
onValueChange	(id: string) => void	—	Fires from the strip, key or code that picked a record, with its id.
label	string	"Records"	The listbox's accessible name.
pages	number	2	How many pages the rack splits the catalogue across, 2 to 4; a page holds up to eight strips, and a longer catalogue adds pages.
finish	"gold" \| "silver" \| "candy"	"gold"	The cabinet's trim, rack frame and key tops, as pigments that read the same in both themes.
arm	boolean	true	A changer arm fetches each record; off, the record rises from its slot and travels to the turntable by itself.
sound	boolean	false	Clack for keys, strips and landings, and a whir while the arm travels. Only for the visitor's own picks and keys.
disabled	boolean	false	The rack and keys can be read but not used.
className	string	—	Classes for the cabinet, which is w-full up to 360px.