Three Linked Paths

Usecase62: Three Linked Paths

Three route cards ordered from slowest to quickest, each a whole link; the middle one inverts to ink.

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

Base UI flavor

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

This installs the block to components/beste/block/usecase62.tsx plus the text1 word stagger it uses.

Quick start

The installed file exports usecase62Demo alongside the block: the exact props behind the preview above. Spread it to get a working three Linked Paths in one line.

import { Usecase62, usecase62Demo } from "@/components/beste/block/usecase62";

export default function Page() {
  return <Usecase62 {...usecase62Demo} />;
}

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

import { Usecase62 } from "@/components/beste/block/usecase62";

export default function Page() {
  return (
    <Usecase62
      eyebrow="Where to start"
      heading="Three ways in. None of them is a commitment."
      description="People arrive at different speeds."
      paths={[
        {
          label: "Most people",
          title: "Send a note",
          description: "A practitioner replies, usually the same day.",
          points: ["Answered by a person", "No forms beyond an address"],
          linkLabel: "Write to us",
          href: "/contact",
          featured: true,
        },
      ]}
    />
  );
}

Props

type Path = {
  label: string;
  title: string;
  description: string;
  points?: string[];
  linkLabel: string;
  href: string;
  featured?: boolean;
};

Behavior notes

• The featured card is inked from the start rather than on hover, so the recommended route is visible before anyone touches it.
• Every colour on a featured card comes from the fixed background token set, because the surface under it is bg-foreground rather than a themed fill.
• The block ships no pill of its own: the three cards are the action, which is why it carries text1 but not button22.
• points is optional, so a route can be a paragraph alone without the card losing its shape.
• The closing label is pushed to the foot by mt-auto, so three cards line their actions up.
• The arrow lifts only under motion-safe:.