Section Index

Pro

A–Z scrubber for long alphabetical lists like contacts. Drag along the rail to jump between sections, with a letter bubble or magnified letters following your finger.

Preview

Installation

npx @lumioui/cli add pro/section-index

Usage

import { ALPHABET, SectionIndex } from "@/components/ui/section-index/section-index";
<SectionIndex />

Also exported: ALPHABET.

Examples

Contacts

A contacts list.

Collapsed

The country-code picker in a travel app's sign-up.

Fisheye

A home wine cellar, A–Z by grape.

API reference

Prop Type Default
sections string[]

Section keys in order. Default A–Z + "#".

 ALPHABET
available string[]

Sections that have rows. Others render dimmed and scrubbing snaps past them. Default all.

 —
activeSection string

The section currently at the top of the list — highlighted when not scrubbing.

 —
onSelect (section: string, index: number) => void

Fires on every new section under the finger (and on tap).

 —
onScrubStart () => void

Fires when a scrub starts / ends — e.g. to pause a sticky header animation.

 —
onScrubEnd (section: string | null) => void —
magnifier "bubble" | "fisheye" | "none"

"bubble" — a large letter beside the rail. "fisheye" — letters near the finger swell and lean out. "none". Default "bubble".

 "bubble"
haptic boolean

Selection haptic on each new section. Default true.

 true
className string —