Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Filterable Award List Block for React

Eighteen awards in two columns narrowed by category chips and a year group, with a live count, a Clear filters button and an empty state.

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 filterable award list for React with Base UI. A start-aligned header counts the awards from the list ("18 awards from 2 programmes since 2021"). Under a ruled band with + marks sit two controls: category chips (Product, Design, Security, Community, each with its count; any number can be on) and a year group ("All years" and one group item per year; one at a time). Below, the awards run in two columns on hairlines, each row a small drawn mark, the award, its programme and category, and the year. A polite line reads "Showing 7 of 18 awards" after every change, "Clear filters" returns focus to the chips and starts again, and a combination with no award shows an empty state. The awards and programmes are made up for the example: replace them with the recognition your product has actually received.

FAQ

How do I change the awards?

Edit AWARDS: each has a title, a programme, a category (product, design, security or community) and a fixed year. The header, the chip counts, the year group and the count line are all derived from that list, so nothing else needs editing.

How do the two filters combine?

Categories add up, so Product and Design shows both; with none on, every category shows. The year group narrows whatever the chips allow. An award must match the categories and the year to stay.

Why doesn't the page jump when I filter?

An unseen copy of all eighteen rows sits in the same grid cell as the live list, so the block keeps its full height while the matches stay at the top. The copy is hidden from assistive technology and the keyboard.

What do screen readers hear?

The chips are a group of toggle buttons with aria-pressed, and each one's count is read after its name. The year group is a set of single-choice items. After every change the status line says how many awards are showing out of the total.

What happens on a phone?

The chips and the years scroll sideways in their own rows with the next one peeking, and the list is one column. Nothing is hidden, and the first awards are in view without scrolling.

Are these real awards?

No. Every programme, award and product here is made up for the example, and the marks are drawn by the block. Replace them with your own recognition; each year is fixed in the data, so an award given in 2025 stays 2025.

  • Pro

    Distribution Bar Filter Awards

    Charts and figures

    One 100% bar split by award category above eight count pills; pressing a pill emphasises its segments and filters the list below.

  • Pro

    Status Radio Toggle Awards

    Filters and search

    A radio group styled as a pill switch with a sliding thumb filters awards by status, with an icon and a word on every row and a live count.

  • 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

    Searchable Archive Awards

    Filters and search

    A decade of awards in a table of eight rows a page, with a search field, a year Select, a live Showing 1 to 8 of 29 line and the catalog Pagination.

  • 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

    Categorized FAQ

    Topics and filters

    A topic-tabbed FAQ for a bookkeeping app: a compact header, a band of line tabs with a count on each, and one accordion per topic.

All 137 awards blocks