shadcn.io is not affiliated with official shadcn/ui
Timeline Day in the Life Team Block for Radix UI
Four people of a design-handoff company in a picker, and the picked person's day as a vertical timeline of five steps, each a fixed time, a title and its kind in plain words, in a split with a divider.
Installation
Overview
A day-in-the-life section for React with Radix UI, for Stanhope, a design-handoff tool. A split: the start column holds the header and a picker of four people, drawn as rows with an initials avatar, a name and a specific role (on a phone, a scroller of chips); the end column is the picked person's day, a vertical timeline of five steps with a time, a title, a one-sentence note and the kind of time it is in plain words, Meeting, Focus, Break, Review or Wrap-up, in a small outline badge. There is no colour code to learn. All four days share one grid cell and only the picked one shows, so the block keeps its height whoever you pick. It's built from Toggle Group, Avatar, Badge and Guides, with CSS entrances and your theme's tokens. For careers pages and culture pages. The people and their days are made up.
FAQ
How do I change the people and their days?
Edit PEOPLE at the top of the file. A person is a name, a first name, a role and five steps; a step is a time ("09:30", 24-hour, in the person's own time zone), a title, a kind word and a one-sentence note. The times are shown as "9:30 am" and are fixed text, so nothing depends on the clock. Keep five steps for each person: the block's height is that of the tallest day.
How does the picker work with a keyboard and a screen reader?
It is a group of toggle buttons named Pick a person, with exactly one picked at all times. Tab moves into it and the arrow keys move between the people, picking as they go. A polite status line reads the result ("Hana Kobayashi's day: 5 steps, from 7:45 am to 4:00 pm") without moving focus, and the days that aren't picked are hidden from assistive technology and can't be focused.
Why does the block never change height?
The four days sit in one grid cell, stacked: the picked one is visible and the other three are invisible, inert and hidden from screen readers. The cell is as tall as the tallest day, so picking someone never moves what is below.
Why are the kinds of time plain words and not colours?
Colour alone fails for people who can't tell the colours apart, and a legend makes you look away from the day to read it. The kind is a word in a small outline badge next to the title, in the page's own tokens, so it reads in any theme and in a screen reader.