shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show where a learner is and what keeping up looks like with this language course product card for React with Radix UI. A hairline frame with a plus mark on each corner holds two ruled bands. The first is a Steps ladder with four rungs, A1 Starter, A2 Basics, B1 Confident and B2 Fluent, where A1 is done and A2 is current. The second pairs a Circular Progress ring reading "14/20" and "Lesson 14 of 20" with the next lesson's name, and a row of seven day dots for the last week with today's drawn dashed. An outline Button, "Mark today's lesson done", fills today's dot, moves the ring to 15 of 20, makes the streak 5 days and names the next lesson; Undo takes it back. The streak, the ring and the lesson number are all derived from the same typed days. Nothing is saved. For language apps, courses and any product with a daily habit.
FAQ
How do I change the learner's progress?
Edit PAST (the days before today, each done or not), FINISHED and LESSONS for the lesson counts, LEVELS and RUNG for the ladder, and UPCOMING for the next lessons' names. The streak is the run of done days counted back from yesterday, plus today if it is marked.
How is the streak worked out?
From the dots, not typed: the done days in a row ending yesterday, plus one if today is marked. In the demo that is four days before, five after. If you add a missed day to PAST, the run restarts from it.
What does Undo do?
It puts today's dot, the ring, the lesson number, the next lesson and the streak back to where they were and returns focus to the Mark button. Nothing was saved, so there is nothing else to revert.
What stays local, and how do I wire it for real?
Today's mark is page state; nothing is saved, so a reload starts again at 14 of 20. Replace the body of mark and undo with calls to your learning API and set PAST and FINISHED from the response. Dates are typed (today is Fri 9 Oct 2026); compute them from your user's own calendar in your app.
Does anything loop or flash?
No. The ring redraws to its new value when you mark the lesson, the dot fills, and nothing else moves or repeats.
Is it accessible?
The ladder is a list that marks the current level and says "Done" before the finished ones. The ring is a named image that reads "14 of 20 lessons done", and each day dot has a hidden sentence ("Mon 5 Oct: lesson done", with "today" on the last). Marking or undoing is announced by the polite status line.
