shadcn.io is not affiliated with official shadcn/ui
Command Palette Search Team Block for Ark UI
A people palette in a framed window for a team wiki: a live command box over twelve people and four teams, matched letters marked, arrow keys to move, and the highlighted entry's profile with its local time beside the list.
Installation
Overview
A people search for React with Ark UI, for Tesselby, a team wiki. A short header and a hint stand at the start, divided by a hairline from a framed window at the end. The window is an inline command palette: a search field over twelve people and four teams in two groups, People and Teams. Typing narrows both lists by name, role, city or team, and the letters that match are marked in the name and the role. The arrow keys move the highlight, and the highlighted entry's profile sits beside the list: a person's role, team, city and local time (read from your clock, in their time zone), or a team's lead, size and what it owns. Enter opens the entry, which here writes "Opened Ingrid Solheim." in the status line at the foot, next to the key hints; wire it to your own page. On a phone the palette comes first under the header and the profile folds under the list. It's built from Command, Search Highlight Text, Kbd, Avatar, Badge and Guides, with your theme's tokens for every colour. The people are invented.
FAQ
How do I change the people and the teams?
Edit PEOPLE and TEAMS at the top of the file. A person is a name, a role, a city, an IANA zone (such as "Europe/Oslo") for their clock, a team, a one-line blurb and whether they lead the team. Teams hold a name and what the team owns; its lead, size and cities are worked out from the people.
What does the search match, and how are matches marked?
Everything in an entry: a person's name, role, city and team, a team's name, what it owns and its lead. Case and accents are ignored, so "bergen" finds Ingrid Solheim and "izmir" finds Zeynep Kaya. The matching letters are marked in the name and the role with a light tint, so the words keep their contrast.
How does the keyboard work?
The field is a combobox: type to filter, press the down and up arrows to move the highlight through both groups, and Enter to open the highlighted entry. The profile follows the highlight. The palette doesn't take focus when the page loads, so it never steals it from a reader.
Is the local time accurate?
It's the visitor's clock read in the person's time zone, shown as hours and minutes in 24 hours and refreshed every half minute. It's read in the browser only, after a "--:--" placeholder, so the server and the page agree on what they first render. Nothing animates.
How does it fit on a phone?
The header and the hint come first, then the window: the list is a fixed-height scroller and the profile folds under it as a compact row with the avatar, name, role and facts. The roles beside the names are hidden to leave room, but they are still searched and shown in the profile.