shadcn.io is not affiliated with official shadcn/ui
Arrivals Ruler Team Block for React Aria
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 React Aria, 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.