shadcn.io is not affiliated with official shadcn/ui
Legal Case Timeline Block for Solid
A sample civil case on a rail where past events are solid and four deadlines are dashed and derived from one date of service by typed rules, counted in days from today, with a bounded date field that moves them all.
Installation
Overview
Work out every deadline from one date with this legal case timeline for Solid with Ark UI. It is written for Docketly, a fictional litigation tracker, and the case is a labelled sample. A hairline frame with a plus mark on each corner holds a vertical rail of the events of a sample civil case: the complaint filed, the summons issued and the service on the defendant as solid nodes, then four deadlines as dashed nodes, each derived from a typed rule ("Answer due 21 days after service", "Discovery closes 45 days after the answer", and so on) and counted in days from 14 Oct. A cell at the end holds the date of service in a date field limited to a range; changing it moves every derived deadline, and on a phone the cell sits above the rail. It is built from Field, Input and Guides with CSS for the rail. For deadline calculators, onboarding schedules and any plan that follows from a start date. The rules are examples, not legal advice.
FAQ
How do I change the rules?
Edit RULES: each has a label, a number of calendar days and the words of the rule. Each rule counts from the date before it, so reordering them changes the chain. The fixed past events are FILED and ISSUED.
Is this legal advice?
No. The case, the parties, the court and the rules are all invented example data, in calendar days with no court holidays or weekend adjustments. Real deadlines depend on the court's own rules and a lawyer's advice.
What stays in the page?
The date of service. Nothing is saved or sent. To make it real, load the case's events from your case system, keep the rules per court and add business-day and holiday logic to the date arithmetic.
What happens if I type a date outside the range?
The field keeps what you typed, an alert under it names the allowed range, and the rail stays on the last valid date until you type another one.