Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA grouped list with sticky section headings and an alphabet index that jumps on tap or drag, announces the letter and works with a keyboard.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for contacts, countries and any long list that people look through by first letter or category.
Do not use it for short lists (a plain List Row group is enough) or for lists sorted by date or relevance, where letters mean nothing.
import { SectionList } from "@/components/ui/section-list"<SectionList
label="Contacts"
className="h-96"
sections={[{ id: "A", items: ["Ada", "Alan"] }]}
getKey={(name) => name}
renderItem={(name) => <div className="px-4 py-3">{name}</div>}
/>| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
SectionList | sections | ListSection<T>[] | required | { id, title?, items }; id is the index letter. |
SectionList | renderItem / getKey | function | required | Render one item and give it a stable key. |
SectionList | label | string | required | Accessible name of the list. |
SectionList | scrubber | boolean | true | Show the index. |
The component ships with a Testing Library test (section-list.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.