Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Issuer Ledger Awards Block for React

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.

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

An issuer ledger for React with Base UI: not a wall of customer logos but the programmes that gave the awards. Under a centred header, six cells stand apart, each one's lines running a little past its corners with a + mark at its start corner. A cell holds a drawn mark (a monogram in a hexagon, a circle, a square, a shield, a diamond or an octagon), the programme set as a wordmark in its own lettering with its kind (Guild, Council, Register…) underneath, and a tally counted from its list of years: "3 awards · since 2021". Six across from xl, three from sm, two on a phone. It is built from Guides and your theme's tokens. 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 programmes and tallies?

Edit PROGRAMMES: each has a name, a kind, a monogram letter, a shape for the frame, two lettering classes and years, the years the product won something from it. The cell's tally and the header's "since" year are counted from those lists.

Are these logos?

They are made-up marks for made-up programmes: a drawn frame with a letter over it, and a wordmark in its own lettering. Never use a real programme's logo without its permission; for your own customers use a logos block.

How is each cell read by screen readers?

The wordmark and its kind are one heading ("Saltmoor Guild"), the tally is text under it, and the drawn frame and the monogram are hidden from assistive technology.

Why six across only from xl?

The wordmarks need about 130 px each. Below xl there are three across (two rows), and two across (three rows) on a phone.

What happens in a right-to-left page?

Wordmarks keep their own direction because they are artwork; the tally sits in a bdi so the digits and the year stay in order.

What moves?

The header and the wall fade up once on load, with a CSS transition that is off under reduced motion.

  • 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

    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

    Bordered Cells Static Grid Wall Logos

    Walls

    Twelve customer wordmarks for a recipe-costing tool, each in a cell of its own whose lines run past its corners with a + mark, four across on desktop and two on a phone.

  • 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

    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

    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