KQ-1276 · LESSON/CARD

Lesson Card

A course card made as a small deck: the front card's ring fills to the share of the course done on springs.glide the first time it comes into view, its percentage counting with it, and the streak days dot along its bottom edge, while the next lesson's card sits behind as a sliver and rises out on glide on hover or keyboard focus. Continue flips through: the front card tips back about its bottom edge on an accelerating exit tween, the next comes forward on springs.snap, the one behind moves up a place on glide, and then the ring fills to its new share and today's dot pops in on springs.recoil. The peeking card's strip is a real disclosure button that pins it up, Escape lowers it, Continue's name says where it goes, and focus follows the new front card.

KQ-1276 · LESSON/CARD

Pricing for Product Teams

Up next · Lesson 7

Running a price test

Lesson 7 of 12 · 18 min

Fieldline Academy

4-day streak

lesson 7 of 12 · 50% done · 4-day streak

Open it on the Studio stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/lesson-card

Props

course: string; default "Pricing for Product Teams"; The course: the card's heading.
provider: string; default "Fieldline Academy"; Who runs it, shown beside Continue.
lessons: { id: string; title: string; minutes: number }[]; default defaultLessons; The course's lessons, in order.
lesson / defaultLesson: number; default 6; Index of the current lesson; lessons.length means the course is complete. The ring shows lesson / lessons.length.
onLessonChange: (index: number) => void; default —; Fires from Continue (the next index) and Start again (0).
onContinue: (lesson: { id: string; title: string; minutes: number }) => void; default —; Fires from Continue with the lesson just finished.
activity: boolean[]; default defaultActivity; Days of activity, oldest first; the last is today. Continue marks today done.
ring: "thin" | "thick" | "segmented"; default "thick"; The ring: one thin arc, one thick arc, or one segment per lesson filling in turn.
peek: number; default 0.75; How far the next lesson's card rises from behind on hover, 0 to 1.
streak: number; default 14; How many days dot along the bottom edge; 0 hides the streak.
continueLabel: string; default "Continue"; The Continue button's text.
finishLabel: string; default "Finish course"; Continue's text on the last lesson.
restartLabel: string; default "Start again"; The button on the complete card.
nextLabel: string; default "Up next"; Words on the card that peeks from behind.
size: "sm" | "md" | "lg"; default "md"; Ring 48 / 60 / 72 px.
accent: string; default "var(--accent-bright)"; The ring, the active days and Continue, as any CSS colour.
sound: boolean; default false; A swish for the flip-through and a plip, pitched by the share, when the ring lands.
disabled: boolean; default false; Nothing continues or peeks.
className: string; default —; Classes for the card.

Prop	Type	Default	Description
course	string	"Pricing for Product Teams"	The course: the card's heading.
provider	string	"Fieldline Academy"	Who runs it, shown beside Continue.
lessons	{ id: string; title: string; minutes: number }[]	defaultLessons	The course's lessons, in order.
lesson / defaultLesson	number	6	Index of the current lesson; lessons.length means the course is complete. The ring shows lesson / lessons.length.
onLessonChange	(index: number) => void	—	Fires from Continue (the next index) and Start again (0).
onContinue	(lesson: { id: string; title: string; minutes: number }) => void	—	Fires from Continue with the lesson just finished.
activity	boolean[]	defaultActivity	Days of activity, oldest first; the last is today. Continue marks today done.
ring	"thin" \| "thick" \| "segmented"	"thick"	The ring: one thin arc, one thick arc, or one segment per lesson filling in turn.
peek	number	0.75	How far the next lesson's card rises from behind on hover, 0 to 1.
streak	number	14	How many days dot along the bottom edge; 0 hides the streak.
continueLabel	string	"Continue"	The Continue button's text.
finishLabel	string	"Finish course"	Continue's text on the last lesson.
restartLabel	string	"Start again"	The button on the complete card.
nextLabel	string	"Up next"	Words on the card that peeks from behind.
size	"sm" \| "md" \| "lg"	"md"	Ring 48 / 60 / 72 px.
accent	string	"var(--accent-bright)"	The ring, the active days and Continue, as any CSS colour.
sound	boolean	false	A swish for the flip-through and a plip, pitched by the share, when the ring lands.
disabled	boolean	false	Nothing continues or peeks.
className	string	—	Classes for the card.