shadcn.io is not affiliated with official shadcn/ui
Teacher Attendance Register Profile Block for React Aria
A teacher profile as an attendance register: a seating chart of desks four across, each a toggle that is present until pressed and shows a slash and the word Absent when not, a class menu that swaps the roster, a Present count, and Mark all present.
Installation
Overview
Take the register by looking at the room, with this teacher profile for React with React Aria. A compact header holds the title and a Native Select that swaps the class between Year 9 and Year 10 Maths. The hairline frame under it opens on the teacher: initials, name, role and place. A band states "Present 24 of 28", worked out from the desks, over a seating chart of seven rows of four, a front-of-the-room bar above it. Each desk is a Toggle with the student's initials in an Avatar, a short name and a word: present desks are quiet with a check, absent ones turn to a muted tile with a slash and the word Absent, so the chart never leans on color. A class with fewer students leaves its spare desks blank so the panel keeps its height. The foot, ruled by Guides, holds a polite status line and a ghost button, Mark all present. It's built from Toggle, Native Select, Avatar, Badge, Button and Guides, with a CSS entrance only. For a classroom tool, a school portal or any profile about a person who keeps a roll.
FAQ
How do I use my own classes and students?
Edit SECTIONS: each class has an id, a name and a list of students in desk order, written as a first name and a surname initial. DESKS_PER_CLASS is how many desks the room has, so a class with fewer students shows blank spare desks, and ABSENT_AT_START lists the desks that begin absent as the class id, a colon and the name. The present count and the header total are worked out from those lists.
Where do the marks go?
Nowhere: they live in the page for as long as it is open, and switching class keeps each class's marks. Each press says what changed in the status line, for example Dmitri L. marked absent. To keep a register, send the class id, the student and the state from the toggle's change handler to your own API and load the day's marks into ABSENT_AT_START.
How can I tell present from absent without color?
By the glyph and the word. A present desk shows a check and Present; an absent one shows a slash and Absent, in a heavier weight on a muted tile. The count above the chart says the same thing in numbers.
What does Mark all present do?
It clears every absence in the class on screen and says so, for example Marked all 28 present. If the room is already full it says Everyone is already present and changes nothing. The other class is untouched.
Is it accessible?
Every desk is a toggle named with the student, such as Ada K., present, and reports whether it is pressed. The chart is a list named after the class, so a screen reader hears how many desks it holds. The class menu has a visible label, and the status line is a polite live region present from the start. Names and counts keep their order in a right-to-left layout.