Scrolling Sequence RailPRO

Feature260: Scrolling Sequence Rail

A feature whose five steps sit on a horizontally scrolling card rail below a two-column header, each card carrying a numbered index, a title, a paragraph and a timing note on a hairline.

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

Base UI flavor

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

This installs the block to components/beste/block/feature260.tsx plus the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Feature260, feature260Demo } from "@/components/beste/block/feature260";

export default function Page() {
  return <Feature260 {...feature260Demo} />;
}

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

import { Feature260 } from "@/components/beste/block/feature260";

export default function Page() {
  return (
    <Feature260
      badge={{ label: "The first fortnight" }}
      heading="What the first two weeks actually look like"
      description="No implementation partner, no six-week discovery. Here is the honest sequence."
      button={{ label: "Start the first step", href: "/migrate" }}
      items={[
        {
          index: "01",
          title: "The export",
          description: "You send whatever your current system will give up, in whatever shape it comes out.",
          detail: "Day one",
        },
        {
          index: "02",
          title: "The mapping call",
          description: "We agree what each old field becomes in the new one.",
          detail: "Day two",
        },
      ]}
    />
  );
}

Props

type ActionLink = {
  label: string;
  href: string;
};

type RailCard = {
  index: string;
  title: string;
  description: string;
  detail: string;
};

Behavior notes

• The rail changes mode at lg. Below it, cards are a fixed w-72 inside a w-max flex row that overflows and scrolls horizontally. From lg the row becomes lg:w-full and each card lg:flex-1, so five cards fit the container with no scrolling at all.
• The scroll container sits outside the max-w-7xl wrapper while its inner row carries the matching padding and max width. That is what lets cards scroll off the screen edge on mobile while still lining up with the header on desktop.
• The card count is not capped, but the lg:flex-1 layout assumes roughly five. More than that will squeeze each card narrower rather than starting a second row.
• Cards use justify-between with the timing note pushed to the bottom, so cards with shorter paragraphs still align their notes along one line.
• The timing note carries its own border-t, so the hairline is part of the note rather than a divider on the card. A card with an empty detail string still renders the rule.
• index is copy, not a computed counter, so the labels survive any reordering of the array untouched.
• The header action is tone="outline", since the rail below it is the section's main event and a solid button here would pull focus off it.