Curriculum Outline

Installation

pnpm dlx shadcn@latest add @cleverui/curriculum-outline

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { CurriculumOutline } from '@/components/blocks/curriculum-outline'

Exampletsx

import { CurriculumOutline } from '@/components/blocks/curriculum-outline'

export default function CurriculumOutlineDemo() {
  return (
    <div className="mx-auto w-full">
      <CurriculumOutline
        heading="Curriculum"
        intro="Six weeks, one project per module. Each week ends with something you can put in a portfolio."
        defaultOpen={0}
        modules={[
          {
            week: 'Week 1',
            title: 'Data hygiene & first queries',
            lessonCount: 8,
            summary:
              'Get comfortable with messy tables, join logic, and writing SQL you can re-run next month.',
            topics: ['Spreadsheets', 'SQL joins', 'Data quality checks'],
            build: 'a reusable weekly sales report from raw exports',
          },
          {
            week: 'Week 2',
            title: 'Storytelling with metrics',
            lessonCount: 7,
            summary:
              'Choose the right chart, cut noise from slides, and defend a number in a short review.',
            topics: ['Chart choice', 'Annotation', 'Stakeholder Q&A'],
            build: 'a five-slide funnel readout for a product team',
          },
          {
            week: 'Weeks 3–4',
            title: 'Experiment design lab',
            lessonCount: 12,
            summary:
              'Frame hypotheses, size samples, and read results without overclaiming.',
            topics: ['A/B framing', 'Guardrails', 'Decision logs'],
            build: 'an experiment brief with success criteria and rollout plan',
          },
          {
            week: 'Week 5',
            title: 'Automation & pipelines',
            lessonCount: 6,
            summary:
              'Schedule the boring jobs. Move from one-off notebooks to something a teammate can trust.',
            topics: ['Scheduled jobs', 'Alerts', 'Versioned queries'],
            build: 'a small pipeline that refreshes a shared dashboard daily',
          },
          {
            week: 'Week 6',
            title: 'Capstone & handoff',
            lessonCount: 5,
            summary:
              'Ship a complete analysis, document your decisions, and present to a live cohort panel.',
            topics: ['Portfolio piece', 'Handoff notes', 'Live review'],
            build: 'your final project, ready for an employer conversation',
          },
        ]}
      />
    </div>
  )
}

API reference

CurriculumOutline accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Curriculum'`	–
`intro`	`string`	–	one plain sentence setting expectations
`modules`*	`CurriculumModule[]`	–	–
`defaultOpen`	`number`	`0`	index of the module expanded on mount; pass -1 to start fully collapsed
`buildLabel`	`string`	`"You'll build"`	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface CurriculumModule {
  /** PREFORMATTED marker, e.g. 'Week 1' or 'Weeks 3-4' */
  week: string
  title: string
  lessonCount: number
  summary?: string
  topics?: string[]
  /** 'what you'll build' note inside the open panel */
  build?: string
}

Related components

Learning Path Map

Courses drawn as one connected path, milestone nodes running from basics to specialization along a drawn spine, with a warm 'you are here' marker set by a prop.

Admission Checklist

What you need to get in and what you can skip, admission requirements as an encouraging two-group checklist with real dl semantics. React and Tailwind block for course sites.

Alumni Story Cards

Graduate stories told as career arcs, from old job to new title, a short quote, cohort chip, and hired-in timeline. React and Tailwind alumni proof cards for course sites.

Cohort Countdown Strip

An enrolment-closing strip, seats left, a preformatted close date, and a compact rolling countdown pointing at one warm CTA. Encouraging urgency, not a fire alarm.

Course Card Grid

Friendly course cards with level chips, duration and next-cohort lines, outcome checklists, and one warm enrol CTA per card, the encouraging way a training site earns sign-ups.

Parents FAQ

The questions parents and skeptics actually ask, accreditation, refunds, job outcomes, answered plainly behind real disclosure semantics, with a talk-to-a-human fallback.

Frequently asked questions

How do I install the Curriculum Outline component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/curriculum-outline`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Curriculum Outline require?

Curriculum Outline uses motion and lucide-react on top of React and Tailwind CSS. You don't need to install them manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Curriculum Outline to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code