# 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/education103. 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. Learning Roadmap Accordion

# Learning Roadmap Accordion[PRO](/pricing)

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.

ViewCodeDocs

Base UI

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

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

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

**Base UI flavor**

bashCopy

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

This installs the block to `components/beste/block/education103.tsx`, the shadcn/ui `accordion` primitive that drives the stages, and the `badge6` component used for the intro eyebrow and the position marker (installed to `components/beste/component/badge6.tsx`).

### Quick start

The installed file exports `education103Demo` alongside the block: the exact props behind the preview above. Spread it to get a working roadmap in one line.

tsxCopy

```
import { Education103, education103Demo } from "@/components/beste/block/education103";

export default function RoadmapPage() {
  return <Education103 {...education103Demo} />;
}
```

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

tsxCopy

```
import { Education103 } from "@/components/beste/block/education103";

export default function RoadmapPage() {
  return (
    <Education103
      eyebrow="Curriculum"
      heading="The design system learning path"
      description="Four stages, from the first colour token to a library that other teams trust."
      stages={[
        {
          title: "Foundations",
          description: "Tokens, spacing, type scale and colour roles.",
          links: [
            { label: "Naming design tokens", href: "/learn/tokens" },
            { label: "Building a type scale", href: "/learn/type-scale" },
          ],
        },
        {
          title: "Build the component library",
          badge: "You are here",
          description: "Turn the foundations into components people can install.",
          links: [{ label: "Variants and sizes", href: "/learn/variants" }],
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type      | Default | Description                                          |
| ----------- | --------- | ------- | ---------------------------------------------------- |
| eyebrow     | string    | –       | Badge6 label above the roadmap title                 |
| heading     | string    | –       | Roadmap title in the panel above the stages          |
| description | string    | –       | Intro paragraph under the title, capped at max-w-2xl |
| stages      | Stage\[\] | \[\]    | Roadmap stages, numbered in array order              |
| className   | string    | –       | Extra classes for the outer section                  |

tsCopy

```
type Stage = {
  title: string;
  badge?: string;
  description?: string;
  links?: StageLink[];
};

type StageLink = {
  label: string;
  href: string;
};
```

### Behavior notes

* The stages are a shadcn/ui `Accordion` in `type="single" collapsible` mode with `defaultValue="stage-0"`, so the first stage is open on load and opening another closes it. Closed stages render their content in the DOM only while open, which is Radix's default for this primitive.
* Stage numbers come from the array index, not from data. Reordering `stages` renumbers the rail.
* The rail, its diamond cap, and the numbered circles are absolutely positioned inside the block's left padding, so the cards keep a normal document flow and the rail never affects their height.
* The number circles are always solid. Only the row itself reacts to state, moving from `bg-muted/60` to `bg-card` through the item's `data-state` on a named `group/stage`, so a closed stage never reads as disabled.
* The trigger hides the accordion's built-in chevron and renders a plus/minus pair instead, swapped by the same `data-state` group. Only the chevron is a direct `svg` child of the trigger, which is what the hiding selector keys on.
* `badge` is per stage and free-form, so the "you are here" marker can be moved by changing which stage carries it. Nothing in the block infers progress on its own. It renders as a `Badge6` on its own line above the stage title rather than inside the trigger, because the trigger is a `button` and `Badge6` renders a `div`. The trigger's top padding tightens when a badge is present so the row keeps its rhythm.
* Lesson links are a one-column grid on mobile, two at `sm`, three at `lg`, and they flow in reading order rather than down each column.

## More Education blocks

[View all Education](/blocks/education)

[](/block/education25)

PRO

education25

### Learner Leaderboard

A gamified leaderboard displaying top learners with rankings, scores, and badges across weekly, monthly, and all-time periods. Perfect for competitive learning platforms and student engagement.

[](/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/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/education12)

PRO

education12

### Video Lesson Hero

A video lesson hero section with course info, thumbnail with play button, and lesson navigation. Perfect for online courses and video-based learning platforms.

[](/block/education104)

PRO

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.

[](/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.