KQ-1174 · THUMB/INDEX

Thumb Index

Section navigation cut into a book's fore-edge: half-moon notches run down the page's edge, each with a printed tab, and a drawn thumb rests in the current one. Pressing a tab lifts the thumb on flick, carries it down the edge on glide and drops it into the new notch on snap, whose one overshoot is the press; the tab stays down and the pages riffle to the section, leaves hinged at the spine turning over one after another on a single staggered clock while the running heads of the sections passed flick by. Arrow keys move between tabs, Home and End jump, a letter moves to the tab that holds it, Enter or Space presses, and the thumb can be dragged down the edge to scrub.

KQ-1174 · THUMB/INDEX

A–BA to B

AlyssumMar–May · 5–10 d
AmaranthApr–Jun · 7–14 d
AsterMar–Apr · 10–21 d
BasilApr–Jun · 5–10 d
BeetrootMar–Jul · 7–14 d
BorageMar–May · 7–10 d

section A–B · 6 seeds · type a letter to jump

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/thumb-index

Props

sections: number | { id: string; label: string; title?: string; letters?: string; href?: string }[]; default 8; How many sections to split A–Z into (4 to 12, balanced by how much of a dictionary each letter fills), or the sections themselves. A section with an href makes its tab a link.
value / defaultValue: string; default —; The current section's id. An id that is not found falls back to the section holding its first letter, so a letter id survives a change of section count.
onValueChange: (id: string) => void; default —; Fires from the press, key or scrub that chose a section, with its id.
children: (section: ThumbIndexSection, index: number) => ReactNode; default —; What the page shows for a section, under its running head. Rendered again on the leaf that carries the page during a riffle.
label: string; default "Sections"; The navigation's accessible name.
tabs: "round" | "square"; default "round"; Half-moon notches with round tabs, or square-cut notches with square tabs.
riffle: number; default 0.6; How many leaves turn on the way to a section, and how slowly, 0 to 1. A longer jump turns more leaves; 0 changes the page with a fade.
sound: boolean; default false; Play a thock when the thumb lands in a notch and a paper riffle for the turning leaves, only in answer to the visitor.
disabled: boolean; default false; The page can be read but the tabs cannot be pressed or scrubbed.
className: string; default —; Classes for the root, which sets the page's size. Defaults to h-104 w-full; the notches spread down whatever height it is given.

Prop	Type	Default	Description
sections	number \| { id: string; label: string; title?: string; letters?: string; href?: string }[]	8	How many sections to split A–Z into (4 to 12, balanced by how much of a dictionary each letter fills), or the sections themselves. A section with an href makes its tab a link.
value / defaultValue	string	—	The current section's id. An id that is not found falls back to the section holding its first letter, so a letter id survives a change of section count.
onValueChange	(id: string) => void	—	Fires from the press, key or scrub that chose a section, with its id.
children	(section: ThumbIndexSection, index: number) => ReactNode	—	What the page shows for a section, under its running head. Rendered again on the leaf that carries the page during a riffle.
label	string	"Sections"	The navigation's accessible name.
tabs	"round" \| "square"	"round"	Half-moon notches with round tabs, or square-cut notches with square tabs.
riffle	number	0.6	How many leaves turn on the way to a section, and how slowly, 0 to 1. A longer jump turns more leaves; 0 changes the page with a fade.
sound	boolean	false	Play a thock when the thumb lands in a notch and a paper riffle for the turning leaves, only in answer to the visitor.
disabled	boolean	false	The page can be read but the tabs cannot be pressed or scrubbed.
className	string	—	Classes for the root, which sets the page's size. Defaults to h-104 w-full; the notches spread down whatever height it is given.