shadcn.io is not affiliated with official shadcn/ui
Professor Courses Ratings Profile Block for Radix UI
A professor profile as a course load: a term menu over a table of five courses with enrolment against the cap and the mean rating, and for the picked course a one-to-five-star histogram with the mean and share rated four or five, plus the term's office hours.
Installation
Overview
Show what a professor teaches and how students rated it, with this professor courses profile for React with Radix UI. A compact header holds the title, one sentence and a Native Select for the term, and the hairline frame under it opens on the professor: initials, name, role and university, and a badge that counts the term's courses and students, worked out from the data. A table lists the term's five courses: the code and title as a button, how many students are enrolled of the cap with a thin bar, and the mean of the student ratings, which folds into the course cell on a phone. Press a course and the cell at the start reads it: the mean and the share rated four or five, a histogram of one to five stars with each count and each share (the shares add to 100), and under it the term's office hours as a description list. It's built from Native Select, Badge, Avatar and Guides with a native table and CSS only. The professor, the university, the courses and the ratings are invented. For a faculty-pages service, a department site or any profile with a teaching record.
FAQ
How do I fill it with my own courses?
Edit FALL, SPRING and TERMS in the Ark file: each term has a name, the kind of survey, its office hours and its courses. A course has a code, a title, enrolled and cap, and five counts for one to five stars. The mean, the share rated four or five, the shares of the histogram (largest remainder, so they add to 100), the bar widths and the student totals are all worked out from those counts.
What happens when I change the term?
The table is replaced by the other term's courses, the first course is picked, the histogram and the office hours follow it, and the status line says what is showing. Both terms have five courses, so the table keeps its height. The survey kind is named in the course summary: a term in progress shows a midterm survey and a finished one the final survey.
Is the table a grid, and how does it work on a phone?
It is a plain table with a caption and column headings; the course name in each row is a button that is pressed when picked. On a phone the rating column hides and the mean moves under the course name, so there is no sideways scroll. The enrolment bars are decoration: the numbers "54 of 60" carry the meaning.
Is it accessible, and what about right-to-left?
The term menu is a native select with a label, each row's button reports whether it is pressed, and the histogram is a list with a count and a share in every row, so it reads without the bars. Figures and times are kept left to right and isolated, and the histogram and the enrolment bars run left to right as charts do. The status line is a polite live region present from the start.
How does it look on a phone?
The table comes first, then the details of the picked course stack under it with the histogram and the office hours. On larger screens the details sit in a cell at the start with a line between the two. The reading order is the same in both layouts.
What stays local, and how do I wire it to real data?
Everything is typed sample data: the professor, the university, the courses and every rating are invented, and picking a term or a course only changes the page and the status line. To wire it up, load the terms from your faculty system into TERMS, keep the helpers, and link each course to its syllabus. Show how many students answered, as the sample does, because a mean without a count misleads.