shadcn.io is not affiliated with official shadcn/ui
Searchable Directory Team Block for Ark UI
A field-service company's eighteen people in one table, under a ruled band with a search field, department and city selects, a live count and a clear button, with an empty state when nobody matches.
Installation
Overview
A team directory for React with Ark UI, for Thrushby, a field-service scheduling company. A compact header sits over a ruled band holding a search field, a Department select and a City select, with a live "Showing 18 of 18 people" line and a Clear filters button at the end. Under it, eighteen people fill a table rail to rail with a name and an initials avatar, a role, a department and a city, and the table ends the block. Typing narrows the rows by name or role, the selects narrow by department and city, and all three combine. The table keeps its full height while you filter, so nothing below it moves, and when no one matches an empty state takes its place with a button to start again. On a phone each row is a name and a role with the department and city under it, eight people are shown and a Show all button opens the rest. It's built from Input Group, Select, Table, Empty, Button, Avatar and Guides, with your theme's tokens for every colour. For an about page, an internal people page or a careers page with a team to browse. The people are invented.
FAQ
How do I change the people, departments and cities?
Edit PEOPLE at the top of the file: each person is a name, a role, a department and a city. The two selects list the departments and cities found in that data, A to Z, behind an "All" option, and the count in the live line comes from the same list, so adding someone needs no other change. Initials are taken from the name.
What does the search match?
The name and the role, ignoring case and accents, so "ferrer" and "design lead" both find Lucia Ferrer. Department and city have their own selects. The three filters combine: a search for "engineer" with Department set to Support shows only the support engineers.
How do screen reader users hear the result?
The line beside the filters is a polite live region ("Showing 5 of 18 people", or "No one matches"), so each change is read once, without moving focus. The search field and both selects have names. Clear filters resets all three and puts focus back in the search field, because the button hides itself once nothing is filtered.
Is it a real table, and how does the keyboard work?
Yes, a table with a name, so a screen reader announces each cell with its column. It's a native table: Tab moves through the controls and the page, and the rows aren't tab stops.
How does it fit on a phone?
The filters stack: the search on its own line, the two selects side by side, then the count and the clear button. The Department and City columns fold into a line under each role, eight rows are shown and a Show all button (it says how many) opens the others. The button reports whether the list is open and which list it controls, and it only appears while more than eight people match.