Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Fanned Plaque Stack Awards Block for Ark UI

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

All 137 awards blocks