shadcn.io is not affiliated with official shadcn/ui
Growth Timeline Team Block for React
A 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.
Installation
Overview
A team-growth section for React with Base UI, written for Tidewick, a fictional shipping tracker. A split on a solid divider: at the start, a title that states the steepest year ("Tidewick went from 4 to 61 people, and Year 4 added 17") with three figures under it; at the end, a framed step chart of the headcount at the end of each year, Year 1 to Year 6. The line holds level between year ends and jumps at each one, a dot with the count sits at every jump, and the biggest rise is drawn heavier and labelled. Under the split a band of six cells on shared hairlines names the first hire of each kind: the year, the role ("First designer"), an initials avatar with a name and one line on what they did first. It draws a step, not a slope, which is how hiring really happens, and it doesn't repeat the stacked columns of the About Team Growth block. The scale, the path, the dots and the labels come from one list, so the drawing and the text agree, and a visually hidden table holds every number. Two columns from lg; on a phone the chart follows the copy and the six cells stack. The people are fictional; the figures are example data.
FAQ
How do I change the years and the hires?
Edit YEARS at the top of the file: for each year, the people at its end and the first hire of that kind (a title, a name, a role and a line about them). The title, the three figures, the axis ceiling, the path, the dots and the biggest rise are all computed from it, so changing a headcount moves the line and rewrites the title. Keep six years for the layout of six cells; any number works for the chart.
Why a step chart and not a line?
Headcount doesn't change smoothly: it jumps when people start and stays level between. A step holds each year-end value until the next, so the jump is the news. The heaviest stroke marks the biggest jump, and its label says how many people it was.
How is the chart read by a screen reader?
The drawing is hidden from assistive technology and a visually hidden table lists the people at the end of every year and how many joined. The figures beside it are a description list, and the six hires are an ordered list with the year, the role and the person in text.
What moves, and what happens with reduced motion?
The line draws from the start to the end once when the block loads and the dots fade in after it, with CSS transitions. With reduced motion everything is simply there.
Does it work right to left?
The chart box is dir="ltr", so time still runs from the first year to the last. The copy, the figures and the six cells follow the page direction.
How does it fit on a phone?
The copy comes first, then the framed chart, with a hairline between them; the year names drop the word "Year" and keep the number, the chart is shorter, the three figures and each hire's one-line note are left out (the title and the chart carry the same numbers), and the six hires stack one per row.
Related
- Pro
Headcount Stacked Chart About
Team and officesHeadcount over six years as stacked columns by department, where choosing a year (focus, hover or tap) lists its departments with counts and shares.
- 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.
- 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.
- Pro
Growth Heat Table About
NumbersFive years of growth in one framed table: revenue, customers, team and NPS by year, each cell shaded by its size against its row, with a closing row of year-on-year revenue growth.
- 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
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.