shadcn.io is not affiliated with official shadcn/ui
Language Learner Profile Block for React Aria
A language learner's CEFR ladder: a choice of three languages, a six-step ladder from A1 to C2 with the current step marked, what the next level lets you do, and a weeks estimate worked out from hours left and daily minutes.
Installation
Overview
Show where a learner stands in each language, with this language learner profile for React with React Aria. A compact header names the app, and the hairline frame under it opens on the learner: initials, name and place. A Toggle Group with one choice at a time picks the language (Spanish B1, Japanese A2 or French A1). The one chosen shows a six-step ladder from A1 to C2 on shared hairlines, each step with its code, its name and a word for its state (Reached with a tick, Now, Next or Later), the current step in solid foreground, then what the next level lets you do in three lines. A Progress bar shows the hours studied toward that level, and a Segment Group sets the minutes a day (10, 20 or 30). The estimate, such as "About 14 weeks at 20 minutes a day", is worked out from the hours left, with the day it lands on from a fixed date. The foot, ruled by Guides, holds a status line. It's built from Toggle Group, Segment Group, Progress, Badge, Avatar and Guides, with a CSS entrance only. For a language app, a school profile or any learner page.
FAQ
How do I fill it with my own languages?
Edit LANGUAGES. Each has an id, a name, the level as a place on the ladder (0 for A1), the done and total hours for the next level and three canDo lines. STEPS holds the six CEFR codes and their names, and DAILY the minutes choices. The progress, the hours to go, the weeks and the landing date are worked out from them.
How is the estimate worked out?
The hours still to study times sixty gives minutes; dividing by the minutes a day times seven gives weeks, rounded up. The landing day adds those weeks to a fixed date (AS_OF), using UTC arithmetic, so the page never reads the clock and reads the same everywhere. Change the minutes and the weeks, the day and the status line follow.
What stays in the page, and how do I make it real?
Everything. The hours are typed sample figures, and nothing is saved or sent. The estimate is a plain division, not a promise. To make it real, load the learner's hours from your own study log.
Is it accessible?
The languages and the minutes are labelled groups. The ladder is an ordered list and the current step carries aria-current="step"; every state is a word as well as a tone, so none depends on colour. The status line is a polite live region present from the start.
How does it look on a phone?
The six steps wrap to two rows of three, the language buttons scroll sideways if they must, and the estimate sits above the minutes control. Switching language keeps three lines of things you can do, so the panel keeps its height. Numbers stay whole in a right-to-left layout.