Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Buddy Page Team Block for React Aria

A buddy page for an expense-report tool: the new hire and their buddy side by side with a link between them, a five-day first-week list, and three people to ask, each with what to ask them about.

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 buddy page for React with React Aria, for Corbridge, an expense-report tool. A start-aligned header sits over a band under a rule with + marks that draws the pairing as a figure: the new hire at the start, their buddy at the end, a small link between them (running down on a phone). Under it, behind a split divider, the first week is an ordered list of five days at the start, and three people to ask are a ruled list at the end, each with what to ask them about. Initials avatars throughout. The block ends on the last row. On a phone the pair stacks and the contacts follow the week. It's built from Avatar, Badge and Guides, with CSS transitions and your theme's tokens for every colour. For welcome pages and the first email a new hire gets. The people are invented.

FAQ

How do I change the people and the week?

Edit WEEK and CONTACTS at the top of the file: a day is a day name, a title and text; a contact is a name, a role, initials and what to ask. The pair itself is written out in the markup with its two Person parts: change their names, jobs and badges there, and the caption for screen readers beside them. Days are weekday names, not dates, so the page never goes stale.

How is the pairing read by a screen reader?

The pair is a figure whose caption (visible to screen readers only) says who is paired with whom ("Eun-ji Park, who joins on Monday, is paired with Chiara Bellini, her buddy for the first eight weeks"). The link between them is decoration and is hidden; the two names are h3s.

Why is the week an ordered list?

Because the order is the content: Monday comes before Tuesday. It's a real ol, so a screen reader announces "list, 5 items" and "3 of 5". The days are hairline rows with the weekday at the start and the day's title and text beside it.

Does it work in a right-to-left language?

Yes. The split, the lists and the pair follow the reading direction. The icon between the two people is symmetrical, so it needs no mirroring.

How does it fit on a phone?

The pair stacks, new hire above buddy, with the link running down between them. The week comes next, then a rule with + marks and the three contacts. A long role or topic wraps; nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The header and the pair fade up once when the page loads, with CSS transitions. Nothing else moves. With reduced motion the fade is off.

All 126 team blocks