shadcn.io is not affiliated with official shadcn/ui
Gradient Connector Timeline Block for React Aria
Eight touches on a sales deal along one line that fades from foreground to border with age, filled or hollow dots for inside and outside the warm window, and a slider from 7 to 30 days that redraws it.
Installation
Overview
Let the line itself show how recent something is with this gradient-connector timeline for React with React Aria. It is written for Dealwarm, a fictional sales CRM. A hairline frame with a plus mark on each corner holds the eight touches of one deal over six weeks, newest first. The line between two touches fades from foreground at the newest to the border colour at the oldest, a mix of two theme tokens that stays clean in any theme. It is data, not decoration: the tone at each end of a segment is how old that touch is. A dot is filled while its touch is inside the warm window and hollow once it is outside, with a key under the rail and a hidden word on each touch. A slider, "Counts as warm for", moves the window from 7 to 30 days, redraws the dots and rewrites the sentence above the rail ("Last touch: 4 days since, warm until Sun 25 Oct."). It is built from Slider, Badge and Guides with CSS for the line. For deals, accounts, customers and any history where staleness is the question. The deal is example data.
FAQ
How do I change the touches?
Edit TOUCHES at the top of the file, newest first: an id, a kind (Call, Email, Demo, Visit), a one-line title and the ISO day on. Ages are counted from AS_OF, the one fixed review date; use today's date in your app. The line's fade scales to the oldest touch in the list.
How is the fade drawn, and why is it not a colour?
Each row draws the segment under its dot as a vertical gradient between two values, --from and --to, set by lineOf() from the ages at both ends. A value is a color-mix of --foreground over --border, so the line fades between two theme tokens and follows light, dark and any custom theme. No hue is used.
What does the warm window do?
A touch is warm when its age in days is no more than the slider's value. Warm touches get a filled dot, the others a hollow one with a heavier outline, and the sentence says when the last touch will go cold. The window is a threshold only; it never changes the line.
What stays in the page?
The slider's value. Nothing is saved or sent. To make it real, store the threshold per team and pass the deal's touches in from your CRM.
Is it accessible?
The slider has a visible label and announces its value in days. The result is written to a polite status line when you let go, not on every step. Each touch carries its age in words and a hidden "Warm" or "Outside the window", so the fade and the dot weight are never the only signal.