Center-Line Journey Timeline

Feature267: Center-Line Journey Timeline

A feature that runs a hairline down the middle of the section and alternates its stages either side of it, dropping an image tile with a live phone frame onto the step worth showing.

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://ui.beste.co/r/feature267?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/feature267?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/feature267.tsx, the browser35 phone-frame piece it drops onto one stage (installed to components/beste/piece/browser35.tsx), and the badge23 component it uses for the eyebrow.

Quick start

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

import { Feature267, feature267Demo } from "@/components/beste/block/feature267";

export default function Page() {
  return <Feature267 {...feature267Demo} />;
}

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

import { Browser35 } from "@/components/beste/piece/browser35";
import { Feature267 } from "@/components/beste/block/feature267";

export default function Page() {
  return (
    <Feature267
      badge={{ label: "The member's side" }}
      heading="What a referral feels like from the outside"
      description="Practices rarely see their own booking journey end to end. This is the whole of it."
      entries={[
        {
          stage: "Day 0",
          title: "The referral arrives",
          description: "The letter becomes a record with a name, not a PDF someone has to retype.",
        },
        {
          stage: "Day 0",
          title: "An offer goes out the same hour",
          description: "Real capacity is matched across every site and the first genuine opening is sent.",
          media: (
            <Browser35
              time="09:41"
              title="Appointment"
              status="Confirmed"
              headline="Wednesday, 14 May · 09:00"
              rows={[{ label: "With", value: "Dr Amelia Frost" }]}
            />
          ),
          image: { src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" },
        },
      ]}
    />
  );
}

Props

type TimelineEntry = {
  stage: string;
  title: string;
  description: string;
  media?: ReactNode;
  image?: TileImage;
};

type TileImage = {
  src: string;
  alt: string;
};

Behavior notes

• Sides alternate by index: even entries take the left column and right-align their text, odd entries jump to lg:col-start-2 and stay left-aligned. Inserting a stage mid-array flips every stage after it, which is worth checking when the entry with the asset moves.
• The centre line moves rather than appearing: it is one absolutely positioned w-px span at left-1.5 on mobile, jumping to lg:left-1/2. So the same markup renders as a left-edge rail on small screens and a centre spine on large ones.
• Each node dot is positioned against the line with lg:left-1/2 lg:-translate-x-1/2 and carries a border-2 border-background ring, which is what punches it out of the line rather than letting the line run through it.
• media is optional per entry, and the block is built for exactly one or two assets. The tile is tall (h-96) and capped at max-w-md, and it gets lg:ml-auto on left-side entries so it hugs the centre line rather than drifting to the page edge.
• The last entry drops its bottom padding with last:pb-0, so the line ends on the final node instead of trailing past it.
• Below lg everything is a single left-rail column with pl-10 clearing the dots, so alternation is purely a large-screen behavior.