Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Industry Coverage Matrix Awards Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A coverage matrix of awards for React with Base 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.

Does it work in a right-to-left layout?

Yes. Years and counts sit in bidirectional isolates, and the sticky industry column and its divider use logical sides, so they follow the page direction.

Are these real awards?

No. The programme, the awards and the product are made up for the example, and each year is fixed in the data.

  • Pro

    Category Grid Awards

    Cards and grids

    Sixteen awards sorted into six categories on a 3 by 2 hairline grid: a drawn glyph, a derived count and the two newest awards named in each cell, the largest category outlined.

  • Pro

    Sortable Table Awards

    Lists and tables

    A sortable table of awards with buttons in the column heads, aria-sort, status badges with an icon and a word, a sticky first column and a count in the foot.

  • Pro

    Category Tabs Awards

    Filters and search

    Underline tabs by award category, each with a count, over a two-column grid of awards with a drawn mark in a frame, beside a split divider.

  • Pro

    Regional Tabs Awards

    Filters and search

    Underline tabs by region with a count on each, a local office line and two columns of local awards with a drawn mark, the programme, the country code and the year.

  • Pro

    Tile Map Awards

    Filters and search

    A tile map of fifteen countries as two-letter squares; the nine with awards are one toggle group, and choosing one fills a panel with its awards.

  • Pro

    Client Wins Awards

    Lists and tables

    A split for a supply-planning tool: the count of awards its customers won this year and three facts at the start and, at the end, a ruled ledger of seven wins with a monogram, the award, the programme and a reported result.

All 137 awards blocks