Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Filterable Award List Block for Svelte

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 Svelte with Ark 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.

All 137 awards blocks