shadcn.io is not affiliated with official shadcn/ui
Placement Rosettes Awards Block for React
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.
Installation
Overview
A rosette display for React with Base 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.
Related
- 213Pro
Three Step Podium Awards
Rankings and scoresA podium of three steps in the order 2, 1, 3, their heights in proportion to rank, a drawn medal on each and the award, programme and year above it.
- Pro
Laurel Display Awards
Badges and sealsA 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.
- Pro
Medal Count Awards
Rankings and scoresAn Olympic-style medals table for a league-tables service: seven product lines ranked by gold, then silver, with drawn medal heads, a total, a stated ranking rule and a top-line callout.
- Pro
Glass Trophy Case Awards
Themed formatsA 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
Achievement Ribbon Banner
Stacked cardsA centred milestone card for a running app: a corner ribbon reading Unlocked, a trophy, a heading, one sentence, a track of five pips with three earned, the next milestone named, and a Shine Button.
- Pro
Seal Row Awards
Badges and sealsA 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.