shadcn.io is not affiliated with official shadcn/ui
Arrivals Ruler Team Block for React
Six people who joined a delivery-routing API this quarter, pinned on a twelve-week ruler above the week they started, then listed newest first with where they worked before and what to ask them about.
Installation
Overview
A new-hires section for React with Base UI, for Dunsford, a delivery-routing API. A start-aligned header sits over a ruler in a band between two rules with + marks: a twelve-week axis, with each new person pinned above the week they started, an initials avatar on a stem that ends in a dot on the axis (two people who started in the same week stack). Under it the same six people are rows, newest first: an avatar, a name and role, a "Joined week 3" chip, a line on where they worked before and what to ask them about. The rows end the block. Weeks count from the start of the quarter, so nothing goes stale; there are no calendar dates. On a phone the ruler scrolls sideways and the rows stack. It's built from Avatar, Badge and Guides, with CSS transitions and your theme's tokens for every colour. For about pages, company updates and intranet home pages. The people are invented.
FAQ
How do I add a person?
Add an entry to HIRES at the top of the file: a name, a role, the week of the quarter they started (1 to 12), a before line and an ask line. Keep the list newest first: it's the order of the rows, and the avatars' tones follow each person's place. The ruler and the rows read the same data, so a pin and its row never disagree. Two people who started in the same week stack on the ruler; a third would need a taller ruler.
How does the ruler work for a screen reader and a keyboard?
The drawing is hidden from assistive technology: the rows carry everything it shows, in order, with "Joined week 3" on each. On a phone the ruler is wider than the screen, so its strip is a labelled region that a keyboard user can focus and scroll with the arrow keys.
Why weeks and not dates?
A date on a block goes stale the day after you ship it. "Week 3" is the third week of the quarter the page is about, so the ruler keeps its meaning; change the header's title when the quarter changes. Time runs from the start to the end of the axis in every language, so the ruler is not mirrored in a right-to-left layout.
How is it marked up?
The rows are an ordered list, because the order (newest first) means something; each person's name is an h3 under the section's h2. Avatars are hidden from assistive technology: the initials add nothing the name doesn't say.
Related
- 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
Buddy Page Team
Hiring and onboardingA 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.
- Pro
Compact List Team
Lists and directoriesThe quiet roster of a fleet-telematics company: one dense line per person at forty pixels, rail to rail, twelve shown and the other twelve opened in place from a Show all button.
- Pro
Growth Timeline Team
Numbers and historyA headcount step chart over six years with a dot and a count at every jump and the biggest rise drawn heavier, over six cells naming the first hire of each kind.
- 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.
- Pro
Hiring Split Team
Hiring and onboardingA hiring split for a charity CRM: the pitch, the headcount and the open-role count with the one Shine Button at the start, and five open roles as a ruled list of links behind a split divider at the end.