Build Timeline Spine

Realestate23: Build Timeline Spine

A construction timeline for a development's sales page: eyebrow, heading and lead, then a vertical list of milestones along a hairline spine that draws downwards as it scrolls into view. Each milestone has a dot that fills in turn, a date set as a light figure, a title and a line. Completed stages have a filled dot, upcoming ones a hollow dot, and the current stage carries a primary dot, a primary date and a short tag. A register button closes the block.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://beste.dev/r/realestate23?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/realestate23?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/realestate23.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the register button, and the shadcn/ui button primitive behind it.

Quick start

The installed file exports realestate23Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Realestate23, realestate23Demo } from "@/components/beste/block/realestate23";

export default function Page() {
  return <Realestate23 {...realestate23Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Realestate23 } from "@/components/beste/block/realestate23";

export default function Page() {
  return (
    <Realestate23
      eyebrow="Progress"
      heading="Where the build is now"
      description="These are the stages between consent and the keys."
      milestones={[
        { date: "2024", title: "Planning approved", description: "Full consent for 24 homes, the courtyard and the river wall repairs.", status: "complete" },
        { date: "2026", title: "Structure complete", description: "The concrete frame topped out in May and the warehouse roof is back on.", status: "current" },
        { date: "Spring 2027", title: "Completion", description: "Homes are handed over building by building, warehouse first.", status: "upcoming" },
      ]}
      labels={{ current: "Now" }}
      button={{ label: "Register for construction updates", href: "/register" }}
    />
  );
}

Props

type Status = "complete" | "current" | "upcoming";

type Milestone = {
  date: string;
  title: string;
  description: string;
  status: Status;
};

Behavior notes

• The spine is a one-pixel line that scales from the top over 1.8 seconds when the list enters the viewport; milestones rise 0.12 seconds apart and each dot scales from 0.6 to 1 a tenth of a second after its row, so the dots appear to fill as the spine passes them.
• status sets the dot: complete is a filled foreground dot, current a primary dot, upcoming a hollow dot with a border; the current stage also sets its date in the primary colour and shows labels.current beside it. Upcoming notes are slightly muted.
• Dates are free text, so a year, a season or a month all work; they are set as a light tabular figure so columns of years align.
• The button rises last, indented to the same left edge as the milestone text.
• With prefers-reduced-motion the spine, dots and rows render in their final state.