Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Awards blocks

Pro

Placement Rosettes Awards Block for Radix UI

Four placement columns for a dog-show manager, each opening with a drawn rosette for first, second, third or highly commended, with a derived count and the results beneath.

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 rosette display for React with Radix UI. A start-aligned header carries a tally counted from the list, then a band of four placement columns runs rail to rail and ends the block, divided by hairlines with + marks where its top rule meets the rails. Each column opens with its own rosette drawn in SVG in the foreground tone: a pleated disc with two tails and the placement in its centre. The first is the largest, double pleated, with a solid centre and long tails; the second and third are smaller and plainer; "highly commended" is a flat disc with short tails. Under it the placement is named in words with a count derived from the list, followed by each result with its show and year. Four across from md, two by two on a phone. 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 results?

Edit RESULTS: each has a name, a place (first, second, third or commended) and a fixed year. The header's tally and every column's count are counted from the list. A column with no results shows its rosette and "0 results".

How are the rosettes drawn?

Each is a few paths in a 64 by 90 box: a scalloped disc computed from a circle and two tails. The first place adds a second, darker pleat ring; the centre lettering ("1st", "2nd") is text over the drawing, so it stays real text. Size and tone come from PLACEMENTS.

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.

How do screen readers read it?

The placements are an ordered list named Placements. Each item gives the placement and its count, then a list of results named for it, each result a heading with its show and year. The rosettes are hidden from assistive technology.

How does it fit on a phone?

Two columns by two rows, with hairlines between them; the rosettes keep their sizes and nothing scrolls sideways at 320 pixels.

All 137 awards blocks