Long Guide Chapter IndexPRO

Education104: Long Guide Chapter Index

A pillar guide hub whose sticky left column carries the pitch, three facts on hairlines and a seal button, while the right column lists every chapter in numbered rows grouped by part.

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

Base UI flavor

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

This installs the block to components/beste/block/education104.tsx, the badge6 component used for the eyebrow and the button1 seal button that opens the guide.

Quick start

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

import { Education104, education104Demo } from "@/components/beste/block/education104";

export default function GuidePage() {
  return <Education104 {...education104Demo} />;
}

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

import { Education104 } from "@/components/beste/block/education104";

export default function GuidePage() {
  return (
    <Education104
      eyebrow="The long guide"
      heading="Running client work without losing the plot"
      description="Everything we know about taking a project from a first email to a clean handover."
      facts={[
        { label: "Chapters", value: "11" },
        { label: "Reading time", value: "About 90 minutes" },
      ]}
      button={{ label: "Start at chapter one", href: "/guide/first-email" }}
      parts={[
        {
          title: "Before the work",
          chapters: [
            { title: "Reading a first email properly", duration: "6 min", href: "/guide/first-email" },
            { title: "The call that decides everything", duration: "9 min", href: "/guide/the-call" },
          ],
        },
      ]}
    />
  );
}

Props

type GuidePart = {
  title: string;
  chapters: Chapter[];
};

type Chapter = {
  title: string;
  duration: string;
  href: string;
};

type Fact = {
  label: string;
  value: string;
};

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

Behavior notes

• Chapter numbers run continuously across parts rather than restarting in each one, so chapter nine is the ninth chapter of the guide and not the second of part three. They are padded to two digits, which keeps the column aligned past chapter nine.
• Numbering comes from the render order of parts, so moving a part renumbers everything after it.
• The left column is lg:sticky lg:top-24, so the pitch and the button stay in view while a long chapter list scrolls past. Below lg it is a normal block above the list.
• Each chapter row is a whole Link with the number, the title and the duration on one baseline, and the title moves to the accent colour on hover.
• Parts carry their own heading and rule, so the list reads as three short lists rather than one long one.