Closing Timeline

Escrow-style closing timeline with done, current, and upcoming markers linked by a colored rail.

Closing timeline

Offer acceptedApr 20

InspectionApr 29

AppraisalMay 6

ClosingMay 22

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

Import & use

import { Realestate10 } from "@/components/beste/piece/realestate10";

<Realestate10
  title="Closing timeline"
  steps={[
    {
      "label": "Offer accepted",
      "date": "Apr 20",
      "status": "done"
    },
    {
      "label": "Inspection",
      "date": "Apr 29",
      "status": "current"
    },
    {
      "label": "Appraisal",
      "date": "May 6",
      "status": "upcoming"
    },
    {
      "label": "Closing",
      "date": "May 22",
      "status": "upcoming"
    }
  ]}
  tone="primary"
/>