Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Category Tabs Awards Block for React

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.

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 tabbed award list for React with Base UI. A split behind a solid divider: at the start a title, a sentence and a tally counted from the list ("16 awards from 2 programmes since 2021"); at the end an underline tab list on a ruled band with + marks (Print, Design, Sustainability and Service, each with its count) and the open panel under it, a two-column grid of cells on shared hairlines. Each cell holds a small drawn mark in a frame, the award, its programme and the year. Arrow keys, Home and End move between tabs. On a phone the header sits over the tabs, which scroll sideways, and the grid is one column. 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 tabs or the awards?

Edit GROUPS: each group has an id, a label and its awards, and each award a title, a programme, a fixed year and a shape for its drawn mark. The tab counts and the header tally are counted from the list.

Does the block change height between tabs?

No. Every panel is stacked unseen in the same grid cell as the open one, so the cell is as tall as the longest panel. The unseen copies are hidden from assistive technology and the keyboard.

Which keys work?

Tab moves focus into the tab list and then to the open panel; the arrow keys move between tabs and open each one, and Home and End jump to the first and last. This is the library's own tab behaviour on every target.

What do screen readers hear?

A tab list named "Award categories", each tab named with its count ("Print, 6 awards"), and the open panel as a list of awards with the award as a heading. The drawn marks are hidden from assistive technology.

What happens on a phone?

The header sits above the tabs and a ruled line separates them. The tab list scrolls sideways when it doesn't fit and the panel is one column.

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. Each year is fixed in the data, so an award given in 2025 stays 2025.

  • Pro

    Filterable Award List

    Filters and search

    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.

  • Pro

    Quarter Tabs Awards

    Filters and search

    Underline tabs Q1 to Q4 of 2025 for a planning tool, each with its months and award count, a panel of that quarter's dated awards and an empty state for the quarter with none.

  • 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

    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

    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

    Tabs Layout Blog

    Post lists

    A film-criticism reading list with three underline tabs, Latest, Popular and Editor's picks, each drawing a different row: dated rows, ranked rows with read counts, and rows with an editor's note.

All 137 awards blocks