Contacts Alphabet List

FreeNew

A contact list grouped by first letter with sticky headings, an edge index that jumps on tap or drag, and a count in each section. Use this when a phone screen lists more than about 30 people or items that people find by name.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use it when a phone screen lists more than about 30 people or items that people find by name.

Do not use it for short lists, or lists ordered by recency where letters carry no meaning.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/contacts-alphabet-list.json

It composes avatar, @tealmac/section-list, which the CLI installs for you.

Usage

import { ContactsAlphabetList } from "@/components/contacts-alphabet-list"

<div className="w-full max-w-sm">
  <ContactsAlphabetList
    className="h-72 rounded-xl border"
    contacts={contacts}
    onSelect={setPicked}
  />
  <p role="status" className="text-muted-foreground mt-2 text-sm">
    Selected: {picked}
  </p>
</div>

Props

Prop	Type	Default	Description
`contacts`	`Contact[]`	`required`	`{ id, name, phone }`; grouped by the first letter of `name`.
`onSelect`	`(id: string) => void`	`-`	Called when a contact is chosen.

Accessibility

Sections are labelled regions with real headings; the index is a nav of buttons named "Jump to B".
Contacts are buttons with name and number as text; initials in avatars are decorative.
The current letter is announced as the index is used.

Testing

The pattern ships with a Testing Library test (contacts-alphabet-list.test.tsx) that drives it through roles and the keyboard.