Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Quarter Tabs Awards Block for React Aria

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.

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 quarter-by-quarter awards view for React with React Aria. A centred header counts the awards and how many quarters they fall in. A ruled band with + marks holds underline tabs, Q1 to Q4 of 2025, each with its months and a count; the open tab's panel lists that quarter's awards as rows with a small drawn mark, the award, its programme and category, and the date, newest first. Q3 has none, so its panel shows the catalog empty state ("No awards announced in Q3") instead of a blank. Every panel is stacked unseen under the open one, so the block keeps the height of the tallest and never moves when you switch. It's built from Guides, the catalog Tabs and Empty, inline SVG marks and your theme's tokens. The awards and the programme are made up for the example: replace them with your own.

FAQ

How do I change the quarters or the awards?

Edit QUARTERS: each quarter has an id, a label, its months and its awards (a title, a category, a fixed date and a shape). An empty awards array gives that quarter the empty state. The counts on the tabs and the header tally are counted from the list; PROGRAMME names who announced them.

What shows for a quarter with no awards?

The catalog Empty: a drawn calendar, the title "No awards announced in Q3" and a line saying what to expect. It is a real panel, so the tab still opens and a screen reader hears the same sentence.

Does the block change height between tabs?

No. Every panel, the empty one included, is copied unseen into the same grid cell as the open one, so the cell is as tall as the tallest. The 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.

What do screen readers hear?

A tab list named "Quarters of 2025", each tab named with its quarter, its months and its count in words ("Q1 Jan to Mar 2 awards"). The open panel is a list of awards with the award as a heading and the date in a time element.

What changes on a phone?

The four tabs share the width and the months are hidden, leaving the quarter and its count; the panel is one column. Nothing scrolls sideways at 320 pixels.

All 137 awards blocks