shadcn.io is not affiliated with official shadcn/ui
Animated Timeline Team Block for React
The 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.
Installation
Overview
A hiring-order timeline for React with Base UI, written for Brackenby Mills, a fictional bakery-supply portal. A split on a solid divider: at the start a header ("Brackenby Mills, hire by hire") that stays in view while you read on a wide screen; at the end a rail of nine hires in the order they joined, each node being the hire's own initials sitting on the line. A hire is an employee number ("No. 10"), a relative time ("Year 1", never a calendar date), what made them first ("The tenth person"), their name and role, and one line on why they came. The rail draws once from the top when the block loads, with a CSS transition, and fades out under the last node. On a phone the header sits above the rail, the first five hires show, and a "Show all 9" button opens the rest. It's built from Avatar, Button and Guides, with your theme's tokens. The people are fictional and the numbers are example data.
FAQ
How do I change the hires?
Edit HIRES at the top of the file: a name, a role, the employee number, a title ("The first engineer"), a relative time and one line on why they came. Keep them in the order they joined. The header counts them and reads the last number ("9 of our first 125 people"), and the phone's "Show all 9" counts them too.
How is the rail drawn?
The line is one decorative element behind the avatars, drawn from the top by a CSS transition once when the block loads and masked so it fades under the last node. Each avatar carries a ring in the page colour that cuts the line around it. With reduced motion the line is simply there.
How does the Show all button work?
Below sm the first five hires show. The button says "Show all 9", states whether the list is expanded and which list it controls, and keeps the same label either way. The hidden hires are still in the page; pressing it shows them.
Does the header really stay in view?
From lg the header is sticky beside the rail, a little below the top of the window, so the title stays visible as you read down the hires. On a phone it simply sits above the rail.
Related
- 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
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
Central Spine Timeline About
TimelinesA company timeline on a central spine: eight events that alternate sides on wide screens, a ring, square or dot node by kind, and a collapsible detail with what shipped.
- Pro
Horizontal Track Timeline About
TimelinesA company timeline drawn as one horizontal track: six milestones in relative time, each a cell of a ruled band with a dot on the rule, turning into a vertical rail on phones.
- Pro
Counted Hiring Bands Team
Hiring and onboardingThe open roles of a freight marketplace as figures and bands: three figures that roll up once on view, then one rail-to-rail band per department with its count, a share bar and its roles.