shadcn.io is not affiliated with official shadcn/ui
Rubric Matrix Awards Block for Svelte
A scoring rubric for an assessment tool: five criteria by four levels with a one-line descriptor in every cell, the level reached ticked and marked current, and a summary counted from the grid.
Installation
Overview
A rubric for Svelte with Ark UI. A centred header with a summary counted from the grid ("Excellent in 4 of 5 criteria") sits above a matrix on shared hairlines that runs from rail to rail and ends the block: five criteria down the side, four levels across (Excellent, Good, Fair, Poor), and in each cell the one-line descriptor for that level. The level reached on each criterion is tinted, carries a drawn tick and is marked as current, and each level's head carries a small meter of four bars so the levels differ by shape as well as by word. On a phone every criterion becomes its own group and only the level reached is shown in full; the other levels keep their descriptors for a screen reader. It's built from Guides, an icon and your theme's tokens. The Briarfield Standard is made up for the example.
FAQ
How do I change the criteria and levels?
Edit LEVELS and CRITERIA at the top of the file. Each criterion has a name, one descriptor for every level in the order of LEVELS, and reached, the index of the level it reached (0 is the first). The grid, the ticks, the summary and the sentence in the header are all made from that data. Keep four levels, or change the column template (COLUMNS) and the meter to match.
Where does the summary come from?
It's counted from CRITERIA: the criteria that reached the first level, out of all of them, and a sentence naming any that stopped short and the level they reached. Change a reached value and both lines update themselves.
How is the reached level marked for assistive technology?
The cell is a list item with aria-current="true", and it also carries a hidden "Level reached." line, so it's announced however a screen reader treats aria-current. The tick itself is a drawing hidden from assistive technology, and the tint never carries meaning alone.
How do screen readers read the grid?
It's a list of criteria, each opening with its name as a heading and holding a list of four levels. The level name is hidden text on desktop (the visible column heads stand in for it, and they are hidden from assistive technology) and visible text on a phone, so every descriptor is always read with its level.
How does it fit on a phone?
Below md the columns give way to one group for each criterion with its four levels stacked. The level reached keeps its tint, outline, tick and full descriptor; the other three show only their level name and keep the descriptor as hidden text. Nothing scrolls sideways at 320 pixels.