shadcn.io is not affiliated with official shadcn/ui
Horizontal Compact Timeline Block for React Aria
One contract term drawn as a single proportional bar in three segments, term, notice window and renewal month, with month ticks, a today notch, a Select that redraws the bar for another contract and one derived sentence for the chosen segment.
Installation
Overview
See how much of an agreement is left, and when you must act, with this horizontal compact timeline for React with React Aria. It is written for Noticewise, a fictional tracker for lease and contract renewals. A hairline frame with a plus mark on each corner holds one bar for one agreement, drawn to scale: the term is solid, the days of notice before it ends are hatched and the renewal month after it is pale, with month ticks under the bar and a notch for today. Each segment is a button, and pressing it writes one sentence under the bar that is worked out from the dates, such as when the notice window opens and closes and how many days away that is. A "Contract" Native Select in the header redraws the bar for an office lease, a cold storage agreement or a software licence, which sit before, inside and after their notice windows. A badge says where today falls. The bar keeps its full width on a phone and nothing depends on hover. It is built from Native Select, Badge and Guides, with an entrance only. For leases, service contracts, licences and any term with a notice period. The contracts are example data.
FAQ
How do I add a contract?
Add an entry to CONTRACTS with an id, a name, the ISO start and end (the last day of the term) and the days of notice. The segments, the month ticks, the sentences and the badge are all derived from those dates and from AS_OF; the renewal month is the RENEWAL_DAYS constant.
How is the notice window calculated?
It is the last notice days of the term, counting the end date itself, so a 60-day window on a term ending 1 Jan opens on 3 Nov. The sentence says whether it opens or opened, when it closes and how many days remain or are ahead, and it says "over" once the window has gone.
Why are the segments different widths?
They are sized by their days, so the bar is a true picture of the term. The renewal month is a short segment, and it keeps a minimum width so it can still be pressed on a phone; the sentence under the bar carries the exact dates.
What stays in the page, and how do I use real contracts?
The chosen contract and segment are local state and nothing is sent or reminded. For real contracts, pass your own terms in the same shape and keep AS_OF as the date of your data. Reminders and notices are a job for your back end, not for this component.
Is it accessible?
Each segment is a native button named with its label and dates and marked with aria-pressed, the select has a visible label, and the sentence is plain text in the page. A polite status line, hidden visually and there from load, repeats the sentence after a change. Pattern and a word, not colour, tell the segments apart, and the bar does not mirror in a right-to-left page.