shadcn.io is not affiliated with official shadcn/ui
Course Education Reviews Block for React
Fifteen reviews of a hand-lettering course with a module list that filters them, a difficulty badge, the instructor's stars, the share who would recommend and learners' skill before and after.
Installation
Overview
A course reviews section for React with Base UI, for Hatchwork, a fictional hand-lettering course. A start-aligned header gives the count, then a split behind a divider. At the start is the module list, a single-choice group of "All modules" and the five modules, each with the share of learners who finish it and its review count; on a phone it becomes a Select. At the end is a pane for the chosen module: its name and a difficulty badge, three figures worked out from its reviews (the instructor's stars, the share who would recommend the course, and the learners' own skill before and after as two bars), a polite line saying what shows, and the three newest reviews as ruled rows. An unseen copy of every choice shares the pane's cell, so the page never moves. It's built from ToggleGroup, Select, Rating, Badge, Avatar and Guides.
FAQ
Where do the instructor, recommend and skill figures come from?
From the typed REVIEWS array. Each review carries the instructor's score, whether the learner would recommend the course, and a self-rated skill before and after (1 to 5). The pane averages the reviews of the chosen module, one decimal by integer maths, and counts the yes answers for the share. The finish rates beside each module are typed data. Edit the arrays at the top of the file to use your own.
What does choosing a module change?
The pane: the heading, the difficulty badge, the three figures, the status line and the three newest reviews of that module. "All modules" shows the whole course, with the module named on each review. An unseen copy of every choice keeps the height, so nothing below moves.
How does the module list work from the keyboard?
It is a single-choice group: arrow keys move between the modules and choose them, Home and End go to the first and last, and one module is always chosen. On a phone the Select does the same job and keeps the same choice.
What do the skill bars mean?
They are the learners' own ratings of their skill before the module and after it, out of 5, averaged over the reviews shown. They are self-reported, and each review also prints its own pair ("Skill 2 to 4 of 5").
Related
- Pro
Criterion Picker Multi-Criteria Reviews
Criteria and compareReviews that each score five criteria, with a picker that sorts the list by one criterion and shows every criterion's average, and the five scores of each review drawn as dots.
- Pro
Recommendation Rate Reviews
Survey scoresThe share of owners who would recommend a mattress, by how long they have owned it: three tabs, a rolling percentage over a two-part bar with a tick for everyone, and the gap in words.
- Pro
Tagged Categories Reviews
Filter and searchA tag sidebar for plant-subscription reviews: eight tags with counts and frequency bars as toggles, an all-or-any Switch, a live count, and reviews that carry their tags as pills.
- Pro
Hotel Travel Reviews
By industryEighteen stay reviews of a small town hotel in tabs by type of traveller, each tab re-deriving the five category scores, with room and night facts and liked and disliked lines.
- Pro
Weighted Category Ratings Reviews
Criteria and compareFive criteria as ruled rows with a bar, a score and a signed change against the previous quarter, and a Select that weighs them for everyday, commuting or gym use and re-derives the overall score.
- Pro
Diverging Bar Survey Results Reviews
Survey scoresFour survey statements as cells with overshoot, each with a diverging five-step agree and disagree bar, a rolling percent that agree, the number of answers and three written answers behind a Collapsible, re-derived by a toggle between everyone and long-time subscribers.