Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Learning Path Kanban Block for Svelte

A four-stage study board (Queued, Studying, Practising, Passed) of eleven electronics modules where a module can't start until its prerequisite is passed, and the refusal names both.

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

Study in the right order with this learning path for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds four ordered stages, Queued, Studying, Practising and Passed, and eleven electronics modules. A module can name one prerequisite, and the board holds the order: a module cannot leave Queued until its prerequisite is Passed, and a Passed module cannot go back while a module that needs it is under way. Both refusals are said in words that name the two modules, for a drag, the keyboard and the Dropdown Menu alike. Each card shows its prerequisite as a lock ("Locked until Ohm's law is passed") or a tick ("Needs Ohm's law, passed"), its kind in an outline Badge and its hours, and the sentence under the heading counts what is passed, unlocked and locked. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the menu. A polite status line reports each change and Reset restores the path. On a phone the columns scroll sideways in one named region. For course trackers, skill trees and any work with an order.

FAQ

How do I fill it with my own modules?

Edit COLUMNS and START. A module has an id, the column it starts in, a title, a kind, its hours and needs, the id of its prerequisite or an empty string. Locks, counts and the header sentence are calculated from the cards.

How does the prerequisite guard work?

refusalOf returns a reason in two cases: the module is moving out of Queued while its prerequisite is not Passed, or a Passed module is moving out of Passed while a module that needs it is Studying, Practising or Passed. The drop, the keyboard steps and the menu all ask it, so no route gets around it. Replace it to allow several prerequisites.

What does the lock mean?

Only a Queued module can be locked: the lock and "Locked until ... is passed" show while its prerequisite is anything but Passed, and a tick replaces it once it is. A module that is already under way always shows a tick, because the guard would not have let it start otherwise.

How do I move a card without a mouse?

Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, the arrow keys move it (left and right change column and swap in right-to-left languages, up and down change its place), Space drops it and Escape puts it back. Each step is announced in the status line.

Why is there a menu as well as the grip?

Dragging needs a held pointer and a path, which not everyone has, so each card has a "More actions" menu with a "Move to" choice for every column and the current one ticked. Choosing one moves the card and says so in the status line.

What stays in the demo?

Everything: stages and moves live in the component's state, nothing is saved or enrolled anywhere, and a reload or Reset restores the starting path. To keep progress, post to your API from put. The modules are made up.