Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Hover Reveal Team Block for React Aria

Six people of an architecture practice as a bare list of names and roles; hovering or focusing a row opens a hover card with the bio, base city and previous studios, and every row is also a link to the profile.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A hover-card team list for React with React Aria, for Brackenwood, an architecture practice. A centred header sits over six hairline rows that run from rail to rail, each an initials avatar, a large name, a role and an arrow. Hover a row, or Tab to it, and a hover card shows a short bio, where the person is based and the studios they worked at before. A touch screen has no hover, so each row is also a link to the person's profile page, where the same facts belong. It's built from Hover Card, Avatar and Guides, with CSS transitions and your theme's tokens for every colour. For practice and studio pages where the names are the point and the detail is a step away. Names, studios and bios are made up for the example.

FAQ

How do I change the people?

Edit PEOPLE at the top of the file. A person is a name, a role, a bio, a city and a previous string of studios; the initials come from the name. Point each row's href at the real profile page.

When does the hover card open?

When a mouse rests on a row for a moment, and when keyboard focus lands on it. It closes when the pointer or focus leaves, and on Escape. Hover is never the only way: on a touch screen the row is a link, so a tap goes to the profile where the card's facts are. The row is a React Aria Link inside HoverCardTrigger. React Aria opens the card on hover only after it has seen the pointer move somewhere on the page, which is always the case for a real mouse. It opens on keyboard focus too.

How does it work with a keyboard?

Tab moves from row to row; the card opens on each after a short delay, so tabbing quickly through the list doesn't flash cards. Enter follows the link, and Escape closes an open card. Each name is an h3 inside its link, so a screen reader can list the people by heading.

What do people on a touch screen get?

A tap on a row follows its link to the profile page. The card never opens on touch, so nothing is hidden behind it: the bio, city and previous studios belong on that page too.

How are the lines drawn, and how does the block end?

The list's top rule, with + marks where it meets the rails, comes from Guides. Each row draws only its top rule, so the last row draws no bottom edge and the next block's top rule closes the list.

How does it fit on a phone?

Below sm each row stacks the name over the role beside the avatar and the arrow, and the rows keep their height. Nothing scrolls sideways at 320 pixels.

All 126 team blocks