Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Learning Path AI Block for Ark UI

A study plan of four modules in a single-open accordion, with lesson checkboxes, progress and time to go worked out from the ticks, modules that unlock when the one before is done, and a goal menu with three typed plans.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Turn a goal into a plan that opens as you go, with this AI learning path for React with Ark UI. A compact header names the plan and holds a Select for the goal (Learn SQL, Learn Spanish, Learn statistics), and a hairline frame with a plus mark on each corner holds the panel. The first band shows the overall Progress ("7 of 14 lessons"), the time to go added up from the lessons still to do, the next lesson, and the Shine Button Continue, the only colored control. Under it, four modules sit in a single-open Accordion, each with a glyph and a word for its state (Done, In progress, Locked) and its lessons as Checkboxes with minutes and a skill Badge. A module is open only when every module before it is complete, so ticking the last lesson of module 2 unlocks and opens module 3. Everything moves with CSS only. For courses, onboarding tracks and any plan where order matters.

FAQ

How does a module unlock?

By a rule worked out from the ticks, not stored: module N is open when every earlier module has all its lessons ticked. Tick the last lesson and the next module opens and says so ("Module 2 done. Module 3 unlocked."). Untick a lesson in a finished module and the later ones lock again; their ticks are kept and count again once the earlier module is complete.

Why can I still open a locked module?

So the plan stays readable. A locked module opens like the others but shows its lessons as plain rows with a lock and says what finishes it ("Finish module 2 to unlock module 3."); there is nothing to tick. Disabled rows would also hide that reason from the keyboard.

What does the goal menu do?

It swaps the typed plan: each goal has its own four modules and a few lessons already ticked, and the progress, the time to go and the open module follow. Edit the PLANS list at the top of the file to add your own, in the form "title|minutes|skill" for each lesson.

What stays in the page, and how do I make it real?

The ticks. Nothing is saved or sent, and reloading returns the typed starting point. To make it real, save each tick with your own API in tick and load the ticks before the first paint; the unlock rule and the counts need no change because they only read the list of ticked lessons.

Is it usable with a keyboard and a screen reader?

Each module is a heading with a button, each lesson a named checkbox with its minutes as a description, and Continue moves focus to the next checkbox. Every change is written once to the status line under the list, and states are words and glyphs, never a color.

How does it look on a phone?

The skill badges drop out, the count moves under the module title and the lessons stay in one column. Every module body has the same height, so opening another never moves the rest of the page.