Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Dense Badge Wall Awards Block for React

A wall of twelve drawn award badges on shared hairlines, four across, with a tally counted from the list and a show-all button on phones.

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 dense badge wall for React with Base UI. Under a compact header that counts "12 awards, 9 programmes, 4 years" from the list, a wall runs from rail to rail in cells that share their hairlines, four across and three down, its top rule meeting the rails at + marks; it ends the block. Every cell is one badge with its own silhouette (a hexagon, a shield, a rosette, a laurel, a cup, a star, a medal, a seal, a crest, a ribbon, a diamond, a ring) drawn in SVG in the foreground tone and hidden from assistive technology, then the award as a heading, the programme and the year. Everything is earned: nothing is locked and nothing counts progress. On a phone the wall is two across, the first six show and one "All 12 awards" button reveals the rest. It is built from Button and Guides. The awards and programmes are made up for the example: swap AWARDS for your own, and use only recognition you have actually received.

FAQ

How do I change the awards?

Edit AWARDS: each has a title, a programme, a year and a drawing (one of twelve shapes, or laurel). The header's tally counts the awards, the different programmes and the different years. Keep a multiple of four so the wall has no empty cell.

How does the show-all button work?

Below sm the cells after the first six are hidden and the button, "All 12 awards", shows them; it keeps one name and its aria-expanded and aria-controls say the rest. The hidden cells stay in the page, so nothing is mounted late.

How are the badges drawn?

Each is a few SVG paths in a 64 by 64 box in the cell's text colour, with a faint opaque fill and a 1.25 px stroke; the laurel is the same kit as the other awards blocks. Shape and the words tell the award, never a metal colour.

Are these real awards?

No. The programmes are invented for the example.

What happens in a right-to-left page?

The wall reads from the other side, years sit in a bdi and the tally keeps its order.

What moves?

The header and wall fade up once on load; the button's chevron turns over. Both are CSS and off under reduced motion.

  • Pro

    Seal Row Awards

    Badges and seals

    A free row of six drawn award seals, each a different silhouette, with the award, its programme and the year under it, and one counted line below.

  • Pro

    Issuer Ledger Awards

    Badges and seals

    Six cells for the programmes that gave an award, each a drawn monogram mark with the programme as a wordmark and a tally of awards and the year since.

  • Pro

    Achievement Trophy Wall Features

    Metrics and charts

    A wall of eight milestone badges for a language-learning app: unlocked ones solid, locked ones muted with a lock and a progress bar, a header count, and a tooltip with each unlock rule.

  • Pro

    Static Grid Wall Logos

    Walls

    A wall of eighteen customer wordmarks for a month-end close tool, under a compact header with the customer count, in cells that share their hairlines from rail to rail.

  • Pro

    Laurel Display Awards

    Badges and seals

    A band of five awards for a weather app, each a laurel wreath drawn in SVG around the award's title and year, with the programme, category and issuer in text and the lead award larger in the middle.

  • Pro

    Credential Badge Kit Awards

    Badges and seals

    A credential badge drawn at 96, 64 and 32 pixels in a framed figure, beside an HTML and Markdown embed snippet in tabs with a Copy button and a Verified line that shows the day the credential is valid until.

All 137 awards blocks