shadcn.io is not affiliated with official shadcn/ui
Owner Lookup Handbook Team Block for React Aria
A handbook lookup in a split: a search field in the start column and a table of eight topics with their owner, backup and channel in the end column, where typing moves the matching topics to the front and dims the rest.
Installation
Overview
A handbook lookup for React with React Aria, for Bamburgh, an internal-wiki tool. A split with a divider: the start column holds the header ("Who owns what at Bamburgh"), a labelled search field and a status line; the end column is a table of eight topics (Expenses, Security incident, Time off, Design review and four more) with the owner as an initials avatar and a name, a backup and the channel to ask in. The table runs to the rail and ends the block. Type a topic, a person or a channel and the matching rows move to the front while the rest stay in place, dimmed, so the table keeps its height; a polite line says how many match. On a phone the table is a single column, with the owner, backup and channel under each topic. It's built from Input Group, Avatar and Guides, with CSS transitions and your theme's tokens. For onboarding pages and internal wikis. The people, topics and channels are made up.
FAQ
How do I change the topics?
Edit TOPICS at the top of the file. A topic is a title, an owner with their role, a backup and a channel. The search matches the title, the owner, the backup and the channel, case-insensitively, so there is nothing else to wire. Eight rows fill the block; more rows make it taller, and the table keeps working at any length.
How does the search work for a keyboard and a screen reader?
The field has a visible label, Find a topic, and sits in a search landmark. Each change updates a polite status line ("2 of 8 topics match “sec”") without moving focus, and the matching rows also come first in the table itself. When there is text, a Clear button appears inside the field; pressing it empties the field and puts focus back in it.
Why are the other topics dimmed instead of hidden?
Hiding rows would shrink the table and move whatever is below it, and an empty result would leave a void. Instead the matches go first, in their usual order, and the others stay below with a light tint and muted text that still meets AA contrast. When nothing matches, every row is shown dimmed and the status line says so.
How does the table fit on a phone?
Below sm the Owner, Backup and Channel columns are hidden and their content moves under the topic, in the first cell: the owner with their role, then the backup and the channel. The table stays a native table, one column wide, with no sideways scroll; the search field is full width above it.