shadcn.io is not affiliated with official shadcn/ui
Accordion Awards Block for Radix UI
Six awards as full-width bands that open one by one, each revealing a drawn mark, the facts behind the award and the jury's citation.
Installation
Overview
An accordion of awards for React with Radix UI. Under a compact header that counts the awards ("6 awards since 2021"), six full-width bands run rail to rail on hairlines and end the block. Each band's trigger reads the year in tabular figures, the award and the programme that gave it, with a plus that turns into a minus as the band opens. The open panel adds a drawn mark in your theme's foreground and the facts behind the award (category, criteria, entries judged and prize) with the jury's one-sentence citation. The first band is open on load and any number may be open at once. On a phone the year drops under the award and each fact puts its label above its value. It's built from the catalog Accordion, Data List and Guides. The awards and programmes are made up for the example: swap AWARDS for your own, and use only recognition you have actually received.
FAQ
How do I change the awards?
Edit AWARDS at the top of the file. Each award has a title, a programme, a fixed year, a category, the criteria it was judged on, how many entries the jury read, the prize, a one-sentence citation and a mark (crown, gem, medal, rosette, shield or star). The header's tally is counted from the list, so it always matches the bands. Add the id of a band to defaultValue to open it on load.
Can several bands be open at once?
Yes. The bands open independently, so a visitor can compare two awards side by side.
The Accordion has type="multiple"; use type="single" collapsible for one band at a time.
How does it work with a keyboard?
Each trigger is a button: Enter or Space opens and closes its band, and the focus ring sits inside the band so it is never clipped. The arrow keys, Home and End also move between the triggers.
Is the text of a closed band in the page?
No: Radix's Accordion removes closed content from the page. If you need the text there for search engines, keep the facts in the trigger or render them elsewhere.
Are these real awards?
No. Cedarline is a made-up app and Cobaltfield, Dunsterling, Fernhallow, Caldwenny, Ironwhistle and Linnetcroft are made-up programmes, and the citations are written for the example. The marks are drawn by the block, not copied from any award body.
How does it fit on a phone?
The year moves under the award, the programme sits beside it and each fact in an open band stacks its label above its value, so nothing scrolls sideways at 320 pixels. The drawn mark stays beside the facts at a smaller size. In a right-to-left layout the bands, the plus and the order of the columns mirror, while years and counts keep their digits in order.