IInbox
Composed

Guides

Modules, lessons, chapters and the panel rail for a course player.

Quote comparison template.xlsxSpreadsheet · 24 KB

Installation

npx shadcn@latest add https://ui.whoisroktim.lol/r/guides.json

Lesson state is a progression

done, current and locked are points on a path, not independent flags. Only one lesson is current, and locked renders muted with no affordance — a lesson you cannot start should not look clickable.

Chapters are timestamps

ChapterRow marks position within one lesson; LessonRow marks position within a module. They look different because confusing the two loses your place.

PropTypeDefaultDescription
state"done" | "current" | "locked"LessonRow.
expanded / onToggleboolean / () => voidModuleRow.
countstringModuleRow. Progress as "2 / 6".
currentbooleanfalseChapterRow. The chapter now playing.