Transport Links Table

Realestate26: Transport Links Table

A transport table for a development's location page: one row per station, pier or bus stop with a small circle glyph that draws itself in, the stop name and walking time, the lines served as outlined text pills, and the minutes to three destinations as light figures that count up from zero as the row comes into view. Hairlines draw between the rows as they rise in order, hovering a row fills its glyph in the primary colour, and a footnote closes the table.

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/realestate26?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/realestate26.tsx plus the badge24 rule eyebrow and the shadcn/ui button primitive it depends on.

Quick start

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

import { Realestate26, realestate26Demo } from "@/components/beste/block/realestate26";

export default function Page() {
  return <Realestate26 {...realestate26Demo} />;
}

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

import { Realestate26 } from "@/components/beste/block/realestate26";

export default function Page() {
  return (
    <Realestate26
      eyebrow="Getting around"
      heading="Two stations, a pier and a bus stop, all inside ten minutes"
      description="The times below are door to door from the courtyard gate."
      destinations={["The old town", "Central station", "The airport"]}
      stops={[
        { title: "Mill Lane station", description: "6 minute walk", lines: ["Riverside line", "Express"], minutes: [11, 18, 44] },
        { title: "Riverside pier", description: "4 minute walk", lines: ["River bus 1"], minutes: [22, 31, 75] },
        { title: "Market Street stop", description: "3 minute walk", lines: ["21", "35", "N21"], minutes: [19, 26, 68] },
      ]}
      labels={{ stop: "Station or stop", lines: "Lines", minutes: "min" }}
      note="Journey times from the operators' timetables on a weekday morning."
      locale="en-US"
    />
  );
}

Props

type Stop = {
  title: string;
  description: string;
  lines: string[];
  minutes: number[];
};

type Labels = {
  stop?: string;
  lines?: string;
  minutes?: string;
};

Behavior notes

• Each stop's minutes are read positionally against destinations: the first figure sits under the first destination, and so on. The grid has room for three destinations beside the lines column.
• The circle glyph is an SVG stroke animated with pathLength from zero once the list enters the viewport, timed just after its row rises; a filled centre dot follows about a second later and turns to the primary colour while the row is hovered.
• Every minute figure is a spring (stiffness 90, damping 22) released when the figure itself is in view, so it counts up from zero; with prefers-reduced-motion the glyph renders complete and the figures show their final value at once.
• Rows rise 0.1 s apart with a hairline drawing from the left at the same moment; the column captions enter just before the first row and the footnote after the last hairline.
• Line names are plain outlined pills with no interaction; below the medium breakpoint the destination captions move inside each row above their figure.