# Section Index

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.

> Composed · Pro · Navigation — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/section-index
```

## Import

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

## Variants

- `contacts` — Contacts: `npx @lumioui/cli add pro/section-index-contacts`
- `countries` — Collapsed: `npx @lumioui/cli add pro/section-index-countries`
- `fisheye` — Fisheye: `npx @lumioui/cli add pro/section-index-fisheye`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `sections?` | `string[]` | Section keys in order. Default A–Z + "#". |
| `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". |
| `haptic?` | `boolean` | Selection haptic on each new section. Default true. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/section-index