KQ-520 · LETTER/INDEX
Letter Index
The A–Z rail beside a long list. Dragging it pops the letter under the pointer out into a bubble on recoil, two visible bounces, while the list jumps instantly because it is following your thumb; letters with no entries are muted and the pick falls to the nearest letter that has some. The rail is a listbox: Up and Down move the active letter past the muted ones, and Enter scrolls the list there.
KQ-520 · LETTER/INDEX
A
- Ada Kelver
- Arno Bight
B
- Bel Marrowe
- Brix Tannen
C
- Cora Fenwick
- Cyd Almer
D
- Dara Holt
- Dov Sarkin
E
- Elin Rask
F
- Fen Oduya
- Freya Salt
H
- Halden Cray
- Hesper Vane
K
- Kit Amberly
- Kova Lind
L
- Lune Farrow
- Lys Tabard
M
- Mara Quill
- Mirek Sand
N
- Nell Arbor
P
- Pell Runcie
- Piet Harrow
R
- Rey Calloway
- Rilke Vost
S
- Sable Nix
- Soren Petch
T
- Tam Wrenfield
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Letter A
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/letter-index
Props
- groups
- { letter: string; items: string[] }[]
- default —
- Sections that exist; every other letter of the rail is muted.
- container
- React.RefObject<HTMLElement | null>
- default —
- The scrolling list; its section headers carry data-letter="A".
- onSelect
- (letter: string) => void
- default —
- Fires when the rail jumps the list to a letter.
- label
- string
- default Jump to letter
- Names the rail for assistive technology.
| Prop | Type | Default | Description |
|---|---|---|---|
| groups | { letter: string; items: string[] }[] | — | Sections that exist; every other letter of the rail is muted. |
| container | React.RefObject<HTMLElement | null> | — | The scrolling list; its section headers carry data-letter="A". |
| onSelect | (letter: string) => void | — | Fires when the rail jumps the list to a letter. |
| label | string | Jump to letter | Names the rail for assistive technology. |