Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Fanned Plaque Stack Awards Block for React

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.

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 plaque stack for React with Base UI. The copy comes first (a heading and a sentence), then a framed figure whose toolbar holds a two-way toggle, "Stack" and "Spread". Stacked, five plaques lie on each other like a hand of cards, each turned a few degrees and a little to one side, the newest on top; spread, they lie in a row, or in a vertical list on a phone, and each moves there with a CSS transform transition that is instant under reduced motion. Each plaque is a drawn mark (a hexagon, a rosette, a diamond, a shield or a ring) with the award as a heading link, the programme and the year. The link stretches over its plaque and a focused plaque lifts to the front, so every one stays reachable by keyboard in either layout. A polite line says which layout is showing. 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 plaques?

Edit PLAQUES: each has an award, a programme, a year, a shape and its poses: fan (the pile from sm), deck (the pile on a phone), row (the spread row) and list (the phone list), as offsets in percent of the plaque's own box. The first plaque is the one on top.

How does the toggle work on each base?

It is a single-choice toggle group that cannot be switched off, and the library's own props differ only in how the selection is passed (an array, a single value or a key set). Whichever layout is chosen sets a data attribute on the figure and the plaques read it.

Can I reach every plaque in the pile?

Yes. Each plaque's heading is a link, so Tab visits them in order; the focused plaque lifts to the front with focus-within, and its focus ring is drawn over it, so an overlapped plaque is never lost.

What happens under reduced motion?

The layout still changes, but instantly: the transform and height transitions are off.

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.

How is this different from the team deck?

The team deck is paged with next and previous buttons, one card at a time. Here all five stay in the page and one toggle lays the whole pile out.

  • 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

    Medallion Flip Awards

    Badges and seals

    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.

  • Pro

    Card Stack Team

    Carousels and reels

    Six people of a perfume subscription as a deck of overlapping profile cards in a framed figure, each card peeking 16 px under the one above, with Previous and Next buttons, a counter and only the top card focusable.

  • Pro

    Glass Trophy Case Awards

    Themed formats

    A glass trophy cabinet drawn in SVG with two shelves, eight trophies of different silhouettes and an engraved plaque under each, with the shelves, awards and programmes counted from the list.

  • Pro

    Class Plaques Hall of Fame Awards

    People and teams

    A hall of fame of seven open-source contributors in three inducted classes, each an engraved plaque with an oval monogram medallion, a one-line contribution and its class year.

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

All 137 awards blocks