Horizontal milestone rail with emerald past dots, a primary current halo, and muted future placeholders.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Legal17 } from "@/components/beste/piece/legal17";
<Legal17
heading="Agreement lifecycle"
milestones={[
{
"label": "Effective date",
"date": "May 1, 2026",
"status": "past"
},
{
"label": "First renewal",
"date": "May 1, 2027",
"status": "current"
},
{
"label": "Auto-renewal lock",
"date": "Mar 1, 2028",
"status": "future"
},
{
"label": "Term end",
"date": "May 1, 2029",
"status": "future"
}
]}
/>Document revision timeline with an emerald Current marker and connector rail down the left edge.
Class-action settlement tile with a matter header, emerald amount band, and fee-share plus approval status.
Contract overview card listing the title, reference code, parties, effective date, and a status pill.
Document row whose icon and pill shift across draft, review, signed, expired, and voided states.
Engagement deliverables panel with due-date rows and pending, progress, delivered, or overdue pills.
Upcoming-hearing card with an amber landmark tile, date and courtroom rows, and an appearance-type pill.