Agreement Timeline

Horizontal milestone rail with emerald past dots, a primary current halo, and muted future placeholders.

Agreement lifecycle

Effective dateMay 1, 2026

First renewalMay 1, 2027

Auto-renewal lockMar 1, 2028

Term endMay 1, 2029

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

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"
    }
  ]}
/>