Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Compact Badge Strip Awards Block for React

A framed awards bar for tight spaces: a bold lead, four outline badges with a small drawn laurel or medal, the award and the year, and a counted tally.

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 compact awards strip for React with Base UI, for the spot beside a pricing table or under a hero where there is room for one line. A framed bar sits inset from the page rails, its lines running a little past the corners with + marks. Inside, a bold lead ("Award-winning experimentation") is the heading, four outline badges follow on one line, each with a small drawn laurel or medal, the award and its year, and a muted tally counted from the list ("4 awards, 3 programmes") ends the bar. On a phone the lead sits above and the badges wrap. It is built from Badge 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 and the tally?

Edit AWARDS: each has a title, a programme, a year and a drawing (laurel or medal). The tally is counted from the list: the number of awards and of different programmes. The programme is read out by screen readers after each award, but kept off the line to save width.

How are the laurels and medals drawn?

Each is SVG in the badge's text colour, 14 px tall and hidden from assistive technology. The laurel is the same kit as the other awards blocks (a stem and leaf pairs, mirrored for the other side); the medal is a ribbon and a ringed disc.

Are these real awards?

No. The programmes are invented for the example. Use only recognition you have received, with its real name.

What if I have more than four awards?

The badges wrap onto a second line in the bar. Past six, use the badge wall or the marquee instead: this strip is for a handful.

How does it behave in a right-to-left page?

Years are wrapped in a bdi so the digits keep their order, spacing is logical, and the bar's corner marks and lines are symmetric.

What moves?

The bar fades in once on load, with a CSS transition that is off under reduced motion. Nothing else moves.

  • 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

    Rating and Laurels Trust Bar Awards

    Strips and banners

    One trust line: a read-only rating with its score and review count, three small laurels with their awards, and a ghost link to all the recognition.

  • Pro

    Dense Badge Wall Awards

    Badges and seals

    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.

  • Pro

    Badges Marquee Banner

    Tickers

    A compatibility ticker for an SDK: a fixed Works with cell holding a pause button, then outline badges for runtimes scrolling past, with fading ends and a hairline between.

  • Pro

    Monogram Badge Strip Logos

    Strips

    A strip of seven monogram badges for a lab-notebook product, joined like a segmented control in one rounded box, under a quiet line.

  • Pro

    Announcement Bar Awards

    Strips and banners

    A slim announcement bar for one headline award: a drawn laurel, one sentence naming the award and the programme, and a Read the story link.

All 137 awards blocks