Learning Roadmap Accordion

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.

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

Base UI flavor

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.

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:

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

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.