Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Product Tiles Awards Block for React

Three product tiles in cells set apart, each with a framed drawing of the app, a tagline, its awards as ribbon rows and a foot line counting them.

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 product awards block for React with Base UI. A centred header carries a tally counted from the list ("7 awards across 3 products") and three product tiles sit under it in cells set apart, each with its own corner marks and lines reaching past the corners. A tile holds a framed greyscale drawing of the app (a canvas window, an editor with a request panel, a phone), the product's name and tagline, its awards as ribbon rows (a small drawn ribbon, the award, its programme and the year) and a foot line counting them ("3 awards"). One column until lg, three across from there. The awards, programmes and products are made up for the example: replace PRODUCTS with your own.

FAQ

How do I add a product or an award?

Edit PRODUCTS: each has an id, a name, a tagline and its awards. A new product also needs a drawing: add a small component in the style of StudioGlyph and return it from glyphOf. The counts and the header tally are derived from the list.

Are the app drawings screenshots?

No. They are small inline SVG drawings in foreground tones, hidden from assistive technology. Swap each frame for your own <img> with alt text when you have a screenshot.

How does a screen reader hear the tiles?

As a list of three products, each with its name as a heading, its tagline, a list of its awards and a count line. The ribbons and the drawings are hidden.

What happens on a phone?

The tiles stack in one column, each starting with its drawing, then the name, the awards and the count.

Does it work in a right-to-left layout?

Yes. Years and counts sit in bidirectional isolates and the rows use logical spacing, so each tile mirrors with the page.

Are these real awards?

No. The programmes, awards and products are made up for the example, and each year is fixed in the data.

  • Pro

    Details Awards

    Cards and grids

    Three award data sheets for a monitoring tool: a drawn mark and the award's name over a description list of result, programme, category, entries judged, announcement date and prize.

  • Pro

    Category Grid Awards

    Cards and grids

    Sixteen awards sorted into six categories on a 3 by 2 hairline grid: a drawn glyph, a derived count and the two newest awards named in each cell, the largest category outlined.

  • Pro

    Featured Plaque Awards

    One featured award

    One grand award for a payments platform: a large framed plaque with a laurel wreath and the year on a ribbon beside the heading, a description list of the facts and one sentence from the jury.

  • Pro

    Raised Card Showcase Awards

    Cards and grids

    Three awards on one raised card for a storefront platform, each row a drawn mark, the award, its programme, a one-line reason and the year, with a centred header and a Shine Button to all awards.

  • 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

    Customer Choice Seal Awards

    Badges and seals

    A split with a drawn satisfaction seal showing the score as text, beside a headline and a cloud of praise topics as outline badges whose size and border step with each topic's share of the most praised.

All 137 awards blocks