Reading Paths By Time Available

Feature270: Reading Paths By Time Available

Three columns keyed to how long the reader has rather than what they want, each opening with the time span, a promise for it, and the two or three pieces that fit inside it.

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

Base UI flavor

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

This installs the block to components/beste/block/feature270.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).

Quick start

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

import { Feature270, feature270Demo } from "@/components/beste/block/feature270";

export default function StartHerePage() {
  return <Feature270 {...feature270Demo} />;
}

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

import { Feature270 } from "@/components/beste/block/feature270";

export default function StartHerePage() {
  return (
    <Feature270
      eyebrow="Where to begin"
      heading="Pick by the time you have, not the topic"
      description="Most reading lists assume you have a free afternoon."
      slots={[
        {
          duration: "Five minutes",
          title: "One idea, argued once",
          description: "Short pieces that stop as soon as the point is made.",
          links: [
            { label: "Why we stopped sending ranges", href: "/essays/ranges" },
            { label: "Saying no in one paragraph", href: "/essays/no" },
          ],
        },
      ]}
    />
  );
}

Props

type TimeSlot = {
  duration: string;
  title: string;
  description: string;
  links: ReadingLink[];
};

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

Behavior notes

• duration is the accent line at the top of each column, which is what makes the section sort by time rather than by subject.
• Columns take as many links as you pass. Nothing pads a short column, so a path with two pieces simply ends earlier than one with four.
• Links underline on hover as well as moving to the accent colour, so the affordance survives for anyone who cannot separate the two colours.
• Each column sits on its own hairline and the grid is three across from md up, stacking in order below that.