# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/education104. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Education](/blocks/education)
5. /
6. Long Guide Chapter Index

# Long Guide Chapter Index[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/education104`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop        | Type          | Default | Description                                         |
| ----------- | ------------- | ------- | --------------------------------------------------- |
| eyebrow     | string        | –       | Badge6 label above the pitch                        |
| heading     | string        | –       | Guide title                                         |
| description | string        | –       | What the guide covers, under the title              |
| facts       | Fact\[\]      | \[\]    | Three short facts on hairlines, in a row from sm up |
| button      | ActionButton  | –       | Seal button into the first chapter                  |
| parts       | GuidePart\[\] | \[\]    | Chapter groups, listed in order                     |
| className   | string        | –       | Extra classes for the outer section                 |

tsCopy

```
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.

## More Education blocks

[View all Education](/blocks/education)

[](/block/education13)

PRO

education13

### Lesson Content Reader

A rich text lesson reader with structured content blocks including headings, paragraphs, lists, quotes, and code snippets. Perfect for text-based courses and educational documentation.

[](/block/education100)

FREE

education100

### Institutional Quick Facts

A quick facts grid displaying key institutional statistics with values, labels, and descriptions. Perfect for university at-a-glance pages and prospective student information.

[](/block/education101)

PRO

education101

### Academy Course Cards

An academy section with an eyebrow over a hairline rule, a two-column heading, and three course cards that each float a live progress checklist above a category, title, and lesson count.

[](/block/education86)

FREE

education86

### Social Media Links Grid

A social media connection section with platform cards showing handles and follower counts. Perfect for university marketing and student community building.

[](/block/education103)

PRO

education103

### Learning Roadmap Accordion

A learning roadmap laid out as a numbered vertical rail, where each stage is an accordion row that opens into its summary and a grid of linked lessons, with one stage able to carry a position badge.

[](/block/education26)

PRO

education26

### Study Streak Tracker

A gamified streak tracker showing current and longest streaks with a visual weekly activity calendar. Perfect for habit-forming learning apps and student motivation.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.