shadcn.io is not affiliated with official shadcn/ui
Buddy Page Team Block for React
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.
Installation
Overview
A buddy page for React with Base UI, 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.
Related
- Pro
Onboarding Checklist Team
Hiring and onboardingOne person's setup list at a security-awareness company: a ring that fills as tasks are ticked, a Next up band, and fourteen tasks in three collapsible groups, each task with a due tag.
- Pro
Phase Stepper Onboarding Team
Hiring and onboardingThe first three months at an HR onboarding company as a stepper by phase (Day 1, Week 1, Month 1, Month 3), each phase with four checkable tasks, a progress bar and the mentor assigned to it.
- Pro
Journey Steps Mentorship Pair Team
Learning and mentoringOne mentoring pair of a leadership program and where they are on their journey: the mentor and mentee, their cadence and topics, and four read-only steps with the week of each, two done, one current and one to come.
- Pro
Accordion Mentorship Team
Learning and mentoringSix mentoring pairs of a coding bootcamp as hairline accordion rows, each joining two avatars with an arrow beside the pair's names; opening a row shows the goal, the roles, the sessions held on a bar and when they meet.
- Pro
Mentorship Match About
CareersTwo sides of a mentorship match for a mentoring-software company, joined by a connector, with three steps underneath for how a match is made.
- Pro
An onboarding process section for an HR company's own about page: a live checklist for the first 30 days, grouped by week, with a running count and bar, a tip from your buddy for each week, and ticks that stay on this page for this visit.