Two Linked Directories

Usecase60: Two Linked Directories

Two ruled directories side by side under their own small-caps headings, every row a link.

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

Base UI flavor

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

This installs the block to components/beste/block/usecase60.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

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

import { Usecase60, usecase60Demo } from "@/components/beste/block/usecase60";

export default function Page() {
  return <Usecase60 {...usecase60Demo} />;
}

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

import { Usecase60 } from "@/components/beste/block/usecase60";

export default function Page() {
  return (
    <Usecase60
      eyebrow="Two ways to look"
      heading="By who you are, or by what you do."
      button={ label: "Talk it through instead", href: "/contact", tone: "outline" }
      columns={[
        {
          title: "By who you are",
          links: [{ label: "Couples", description: "Fortnightly, in the room", href: "/couples" }],
        },
      ]}
    />
  );
}

Props

type ColumnLink = {
  label: string;
  description?: string;
  href: string;
};

type Column = {
  title: string;
  links: ColumnLink[];
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• Each row is one Link with its own arrow, so the two directories behave the same way whichever side a reader starts on.
• The rows tint on hover rather than the labels moving, so the two columns stay level with each other.
• Only the column headings are small-caps; row labels stay serif at sentence case, keeping one uppercase line per column.
• description is optional per row, so a directory can mix bare labels with explained ones.
• Columns stack below md with their headings intact, so the two axes remain distinguishable on a phone.
• Entry delay is per column rather than per row, so the two sides arrive one after the other.