Stacked List React component
A stacked A to Z contact list: sticky letter headings that light up as you scroll, an alphabet index on the side that jumps to a letter, search, rows with avatar or initials, tags and last contact, arrow-key navigation, and rows that open to show email and call actions.
About the Stacked List component
Stacked List is the classic A to Z contact list, done properly. Contacts are grouped by letter under sticky headings, and an alphabet down the side jumps straight to a letter while highlighting where you are as you scroll.
Each row shows the person, their company and email, tags and when you last spoke; click it to reveal email and call buttons without leaving the list. Search regroups the list instantly, and the arrow keys move from row to row.
When to use it
Use it for address books, client lists, member directories, phone-style contact pickers or any long list of names.
Use the Grid List instead when photos matter more than scanning names.
Installation
Add the Stacked List component to your project with the shadcn CLI. It lands in components/stacked-list.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/stacked-listOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<StackedList /> accepts 4 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Contacts" |
| contacts | { id: string; name: string; company: string; email: string; phone: string; avatar?: string; lastContact: string; tags?: string[] }[] | DEFAULT_CONTACTS |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Contacts"
- contacts{ id: string; name: string; company: string; email: string; phone: string; avatar?: string; lastContact: string; tags?: string[] }[]Default: DEFAULT_CONTACTS
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Stacked List FAQ
- How does the alphabet index work?
- Each letter that has contacts is a button that scrolls the list to its section. Letters without contacts are dimmed and disabled, and the current letter is highlighted as you scroll.
- Do the headings stay visible?
- Yes. Letter headings are sticky inside the scroll area, so you always know which part of the alphabet you are in.
- Can I use it with the keyboard?
- Tab into the list and use the up and down arrow keys to move between rows; Enter or Space opens a row's actions.
- How are contacts sorted?
- Alphabetically by name, using the first letter for grouping. Sort by last name by passing names as 'Last, First' or by changing the sort.
- Is it accessible?
- Each letter group is a labelled section, rows are buttons with aria-expanded, the index is a labelled nav with named buttons and aria-current, and the email and phone actions are real links.
