shadcn.io is not affiliated with official shadcn/ui
Customer Timeline Dashboard Block for React Aria
Four customer accounts in a list and one account's journey beside it: tenure and revenue, a rail of four stages with the days between them, and a Product, Billing and Support filter.
Installation
Overview
See how an account got where it is, with this customer timeline for React with React Aria. A hairline frame with a plus mark on each corner holds a list of four Waymarker accounts at the start (name, plan and the stage each has reached) and the chosen account's journey beside it. Its header gives the plan, the annual revenue, the tenure and the stage, and a multiple Toggle Group limits the timeline to Product, Billing or Support events. The timeline runs down a rail along its start edge with a marker for each stage the account reached (Acquired, Activated, Expanded, Renewing) and the days since the previous stage, and eight events with an icon, a title, a line and a date. Choosing an account swaps the detail in place inside a fixed-height region. On a phone a Native Select replaces the list. It's built from Toggle Group, Native Select and Guides. For customer-success workspaces, account reviews and renewal prep.
FAQ
What is worked out and what is typed?
Each event has a date, a kind, a stage number, a title and a line. The tenure is the days from the first event to the typed date, shown in days under two months and in months after that. The days between stages are counted from the first event of each stage. The stage in the list is the highest one an account has an event in. Only the annual revenue and the plan are typed on the account.
What does the filter hide?
It hides events of the kinds that are off. The stage markers stay, since they come from all of the account's events, so a filtered timeline still shows how long each stage took. At least one kind stays on.
What stays local, and how do I wire it for real?
Everything: the accounts are made up and nothing is read from a CRM. Replace CUSTOMERS with accounts and their events from your customer record, tag each event with a stage, and keep the same stage names or change STAGES.
Can I use it without a pointer?
Yes. Each account is a button marked with aria-current when chosen, the toggle takes arrow keys, and the timeline region scrolls by keyboard. Stage markers are headings with a hidden Stage number, and a polite line says how many events show.