shadcn.io is not affiliated with official shadcn/ui
Timeline With Avatars Block for Solid
Ten account interactions on a vertical rail, each with a stack of the teammates who took part, and six avatar toggles that light one person's events or only the events two people both attended.
Installation
Overview
Show who was in the room with this timeline with avatars for Solid with Ark UI. It is written for Whomet, a fictional account management tool. A hairline frame with a plus mark on each corner holds six teammates at the start as Toggle buttons with an avatar, a name and the number of events they were at, and beside them a vertical rail of ten interactions with one account: meetings, calls, demos and emails. Each has a round tile for its kind, a title, a date and an Avatar group of the people who took part. Choose one teammate and the rail lights their events and dims the rest; choose two and it lights only the events both attended, and the status line says so ("Ana and Raj together: 3 events"). A choice nobody shares shows the empty state in the same height. The counts are derived from the events. On a phone the teammates become a scrolling row above the rail. For account records, project histories and any record where people are the filter. The people and events are example data.
FAQ
How do I change the people and events?
Edit PEOPLE and INTERACTIONS at the top of the file. A person has an id, a name, a first name and initials; an interaction has an id, an ISO at, a kind, a title and who, a list of person ids. The counts, the groups and the sentences are derived from who.
What does choosing two people do?
An event is lit when every chosen person was at it, so two people show the events they share, three show the events all three attended, and so on. litBy() is the one rule behind the dimming, the count and the empty state. Turning a person off widens the result again.
Why dim instead of hide?
Dimming keeps every event in its place and the panel at the same height, so you still see where the lit events sit in the story. When nothing is lit, the list gives way to the empty state in the same scroll region.
What stays in the page, and how do I use real people?
Everything: the chosen people are local state and no request is made. To use your own, map your attendees to who and render a photo with AvatarImage instead of initials if you have one; the avatars here show initials only.
Is it accessible?
The teammates are toggle buttons with a pressed state and a name, in a labelled group. The avatar stacks are hidden from assistive technology and replaced by a sentence ("With Ana, Raj and Tomas"). Dimmed events stay readable and in the reading order, and the status line is a polite live region present from load.