Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Medallion Flip Awards Block for React

Five drawn coin medallions that a Front and Back toggle turns over together, a front emblem and a back year, with each side's text kept in the page.

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 medallion flip for React with Base UI. A centred header carries a two-way "Front / Back" group, then five coin-like medallions in cells set apart: three and two on a phone and tablet, five in a row from lg. A coin is drawn in SVG in the foreground tone: its front an embossed emblem inside a beaded ring, its back the year in large numerals. Choosing Back turns the whole row over in 3D, each coin 60 ms after the one before; under reduced motion the faces cross-fade instead. Under each coin the award stays as a heading, and a cell holds the front's line (the programme) and the back's lines (year, category and the entries the jury read), the side that isn't showing hidden from view. 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 coins?

Edit MEDALS: each has an award, a programme, a category, a year, the entries judged and an emblem (star, hex, diamond, shield or crown). The header's line counts the awards and sums the entries.

How does the Front and Back group work?

It is a SegmentGroup with one API on every base. It holds the side in state, sets a data attribute on the list, and every coin reads it, with a delay of 60 ms per coin so the row turns in a wave.

What do screen readers hear?

The coin faces are hidden from assistive technology; the text is the page's. Each cell's front line and back line share one grid cell and the one that isn't showing is made invisible, so only the visible side is read. A polite line announces "Showing the back of every medal."

What about reduced motion?

Nothing turns: the front and back lie over each other and cross-fade, and the text swap is immediate.

Are these real awards?

No. Every programme and product here is made up for the example, and the trophies, rosettes and medals are drawn by the block, not copied from any award body. Replace them with your own recognition, and use an organiser's official artwork only if its rules allow it.

Are the years computed?

No. Each year is fixed in the data, so an award given in 2025 stays 2025. Years are wrapped in a bdi element so they keep their order on a right-to-left page.

  • Pro

    Press to Flip Award Cards

    Reveal and browse

    Six award cards in a hairline grid that are each a button flipping on press or Enter, from a drawn mark and the award to the entries it was selected from and its judging criteria.

  • Pro

    Fanned Plaque Stack Awards

    Reveal and browse

    A fanned pile of five award plaques that a Stack and Spread toggle lays out in a row, or on a phone a vertical list, with a CSS transform transition.

  • 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

    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

    Flip Cards Team

    Grids and walls

    Four people of a florist network as cards that turn over in 3D on a button press: the front is initials, a name and a role, the back a quote and two things to ask them about; reduced motion cross-fades.

  • 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.

All 137 awards blocks