shadcn.io is not affiliated with official shadcn/ui
Anniversaries Team Block for React
A tenure ladder: bands for 10, 5, 3 and 1 years, each with its count and the people in it, under a retention figure computed from the cohort it counts.
Installation
Overview
A work-anniversaries section for React with Base UI, written for Turfmoor, a fictional landscaping marketplace. A start-aligned header says "The people who stayed at Turfmoor" and, at its end, the retention figure: "87% stay past three years", with the cohort it counts under it ("46 of the 53 people who joined more than three years ago are still here"). Under it four bands run from rail to rail for 10, 5, 3 and 1 years and end the block. Each band has a milestone at the start (the years, how many people are in it and a rung as long as the tenure, against the longest) and the people at the end on a solid divider: an initials avatar, a name and a role. On a phone the milestone sits above the people, and the roles and the cohort sentence are dropped from view (the cohort sentence stays for screen readers). Years are tenures, never calendar dates, so the block never goes stale. It's built from Avatar and Guides with your theme's tokens. The people are fictional and the figures are example data.
FAQ
How do I change the milestones and the people?
Edit RUNGS at the top of the file: each rung is a number of years and the people at it, a name and a role. The counts, the header's total and the length of each rung are computed from it. The retention figure comes from COHORT (how many people joined more than three years ago and how many of them stayed), and its percentage and sentence are computed from those two numbers.
Why are there no dates?
A tenure is "Year 5", not a calendar year, so the block says the same thing next year as this year. If you want to show who reaches a milestone this month, filter the list when you render it rather than writing the date into the block.
What is the bar under each count?
A rung, drawn as long as the tenure compared with the longest band: ten years is the full width, one year a tenth of it. It is a drawing, hidden from assistive technology; the years and the count are in text.
How is it read by a screen reader?
The bands are an ordered list; each has an h3 with the years, the count, and a list of the people with their names as h4 headings and their roles under them. The retention figure is a description list: "stay past three years, 87%".
Related
- Pro
Arrivals Ruler Team
Numbers and historySix 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.
- 0102030405Pro
Numbered List Team
Lists and directoriesSixteen people of a plant-care app as an ordered list in the order they joined, each row an employee number in tabular figures, an initials avatar, a name, a specific role and a company-relative join year.
- Pro
Stats Overview Team
Numbers and historyFour people figures with their change on a year ago, over seven department rows whose bars draw what each department was a year ago and what it has added since.
- Pro
Tabbed Ladder Career Paths Team
Learning and mentoringThree career tracks as flat tabs, each a five-rung ladder drawn upward on a rail: the level, the title, one line on what it expects and the people who are on it today.
- Pro
By The Numbers Bento About
NumbersAn asymmetric bento of company figures for an expense tool: a lead cell with the customer count over a twelve-bar trend, and five smaller cells tagged People, Customers or Product, each footnoted with how it was counted.
- Pro
Animated Timeline Team
Numbers and historyThe order nine people joined a bakery-supply portal, as a vertical rail with each hire's initials as its node, drawn once from the top, beside a header that stays in view.