shadcn.io is not affiliated with official shadcn/ui
Timeline Day in the Life Team Block for React
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 Base 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.
Related
- Pro
Weekly Rhythm Team
Culture and valuesHow a week runs at a project-planner company: five day columns in one hairline band, each with a ritual, its time, who hosts it and a length in minutes that counts up once, drawn to the same scale as a short bar.
- Pro
Onboarding Checklist Team
Hiring and onboardingOne person's setup list at a security-awareness company: a ring that fills as tasks are ticked, a Next up band, and fourteen tasks in three collapsible groups, each task with a due tag.
- 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
Slot Picker Office Hours Team
Hours and placesWeekly office hours of a pair-programming service: five day tabs, each with three engineers' half-hour slots as pills, and a single Shine Button that reads 'Book Thu 14:00 with Noor' once a slot is picked.
- Pro
Vertical Tabs Team
Tabs and accordionsThe people of a help desk in a split: a vertical tab rail of five departments, each with its headcount and three avatars, beside a page that says what the team owns, shows its lead and lists the team.
- Pro
Hybrid Week Desks Team
Hours and placesA coworking company's hybrid week as a table: eight people by Monday to Friday, each cell a desk code like BER-214 or Remote, a who-is-in count under each day and a select to look at one office.