shadcn.io is not affiliated with official shadcn/ui
Instructor Curriculum Outline Profile Block for React
An instructor profile as a curriculum outline: a list of three courses with learners, a read-only star score and completion, and the chosen course as an accordion of modules with lesson minutes, total time, a completion bar and a student quote.
Installation
Overview
Let learners read what a course teaches before they enrol, with this instructor profile for React with Base UI. The hairline frame opens on the instructor: initials, name, role and place. At the start is a list of three courses, each a radio with its title, its learners in compact notation, a read-only Rating and the share who finished. Pick one and its curriculum fills the end cell: the title, the module, lesson and hour totals worked out from the lessons, an Accordion of three modules, each opening to its lessons and their minutes, a completion rate on a Progress bar with the learners behind it, and one student's words. One module is always open, and every course has the same shape, so choosing a course never moves anything. The foot, ruled by Guides, holds a polite status line that sums up the course shown. On a phone the list becomes a row you scroll sideways. It's built from Accordion, Rating, Progress, Badge, Avatar and Guides, with a CSS entrance only. For a course marketplace, an academy site or any profile about a teacher with a catalogue.
FAQ
How do I use my own courses?
Edit COURSES. Each course has a title, the number of learners who enrolled and how many finished, a score out of five, one quote with who said it, and three modules of lessons, each lesson a title and its minutes. The learner counts, the completion percentage, the lesson count and the total time are all worked out from those numbers, so nothing is typed twice. All figures here are invented example data.
What is local in the demo?
Choosing a course and opening a module only change what the page shows; nothing is enrolled, fetched or saved. The status line says which course is showing, with its modules, lessons and time. To make it real, load a course from your API when its radio changes and keep the open module in the address so it can be linked.
Which module is open, and can I close it?
Exactly one module is open at all times; opening another closes the first, and the first module opens again when you change course. That keeps the outline the same height for every course. Tab moves between module headings; the arrow keys do not.
Can I rate a course here?
No. The stars are a read-only summary, hidden from assistive technology with the score written out beside them, for example 4.7, so nothing offers a rating it cannot take. For a form that collects stars use an interactive Rating.
Is it accessible?
The course list is a group of radios, each named with its course, so the arrow keys move the choice and the choice is announced. The modules are headings with buttons, the lessons an ordered list, and the status line is a polite live region present from the start. Counts, minutes and names keep their order in a right-to-left layout.