shadcn.io is not affiliated with official shadcn/ui
Industry Coverage Matrix Awards Block for Solid
A centred header and a table of six industries by four kinds of award, each cell a solid dot with its year or a hollow one, with counts per row and per column.
Installation
Overview
A coverage matrix of awards for Solid with Ark UI. A centred header says how much of the grid is filled ("21 of 24 covered", counted from the list), then a native table runs rail to rail between ruled bands with + marks. Its rows are six industries (Finance, Health, Retail, Public sector, Education and Logistics) and its columns four kinds of award (Product, Security, Customer and Innovation). A won cell is a solid dot with its year, an empty one a hollow dot; a last column counts each industry ("3 of 4") and a foot row counts each kind. On a phone the industry names stay put while the kinds scroll sideways. The awards and the programme are made up for the example: replace WINS with the recognition your product has actually received.
FAQ
How do I change the industries, the kinds or the awards?
Edit INDUSTRIES, KINDS and WINS. A pairing with an entry in WINS is covered and shows its year; a pairing without one is a hollow cell. The "covered" header, the row counts and the foot row are all counted from WINS.
How do I tell won from not yet without colour?
By shape and by words: a solid dot with the year against a hollow dot, and each cell has hidden text ("Covered in 2025" or "Not covered") for assistive technology. The block uses foreground tones only.
How does it work with a screen reader?
It is a native table with a caption, column headers and the industry as a row header, so a reader announces the industry, the kind and then "Covered in 2024" or "Not covered". The dots are drawn and hidden from assistive technology.
What happens on a phone?
The table keeps its width and scrolls sideways in a region you can focus and scroll with the arrow keys, while the industry column stays in place at the start.