Contacts Quick List React component
A two-pane contacts screen: search, All / Favorites / Online filters, a favorites avatar strip, an A–Z list with sticky letters and a jump index, presence dots, hover quick actions for message and call, and a detail pane with actions, favorite toggle and copyable email and phone.
About the Contacts Quick List component
Contacts Quick List is a people directory built for getting in touch fast. Search, filters and the A–Z index find anyone in a long list, and message and call buttons sit right on each row so you don't have to open a profile first.
Favorites stay one tap away at the top, presence dots show who's around, and the detail pane gathers everything else: local time, actions and copyable email and phone. On phones it becomes a list-then-detail flow.
When to use it
Use it for CRM contacts, a team directory in a chat or call app, or a client list inside an agency dashboard.
For a sortable admin table of employees use the People Directory Table; for one person's full profile use the Member Profile Card.
Installation
Add the Contacts Quick List component to your project with the shadcn CLI. It lands in components/contacts-quick-list.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/contacts-quick-listOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ContactsQuickList /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| contacts | Contact[] | CONTACTS |
| onMessage | (c: Contact) => void | — |
| onCall | (c: Contact) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- contactsContact[]Default: CONTACTS
- onMessage(c: Contact) => void
- onCall(c: Contact) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Contacts Quick List FAQ
- How do I connect presence?
- Pass presence on each contact (online, away or offline) and update the array from your realtime channel. Dots, the Online tab and the online count follow.
- Where do I wire messaging and calls?
- onMessage and onCall receive the contact, from both the row buttons and the detail pane. Email opens a toast in the demo; swap it for a mailto link or your composer.
- Are favorites saved?
- They're toggled in component state. Persist them by reading favorite from your data and saving when the star is pressed (add a callback next to toggleFav).
- Does it handle hundreds of contacts?
- Grouping and filtering are cheap, and the list scrolls inside the card. For thousands, virtualise the list body and keep the sticky letter headers.
- Is it accessible?
- The list is a listbox with options and arrow-key navigation, filters are tabs, the letter index is a labelled nav, icon buttons have names, the favorite toggle uses aria-pressed and the detail pane is a polite live region.
