shadcn.io is not affiliated with official shadcn/ui
Collapsible List Awards Block for React Aria
Twelve awards in five collapsible category groups with counts, any number open at once, and an Expand all button beside the header.
Installation
Overview
A two-level list of awards for React with React Aria. A header and an "Expand all" button sit at the start of a split; a divider separates them from five category groups at the end, which run to the bottom of the block. Each group is a catalog Collapsible: a drawn mark in your theme's foreground, the category's name and a count derived from its awards, a chevron, and, when open, an indented list of its awards with the programme and the year, set off by a hairline. Any number of groups may be open, and a polite line says how many are. The button opens every group and then becomes "Collapse all". On a phone the header and the button come first and the groups follow beneath a rule. It's built from the catalog Collapsible, Button and Guides. The awards and programmes are made up for the example: swap GROUPS for your own.
FAQ
How do I change the awards and the groups?
Edit GROUPS at the top of the file: each group has a name, a mark (one of the five drawings above it) and its awards, each with a title, a programme and a fixed year. The counts in the rows and the header's tally come from the list. List the ids of the groups to open on load in FIRST_OPEN.
Why can several groups be open?
The open groups are a list of ids held in one piece of state, so opening a group never closes another; "Expand all" sets the whole list and "Collapse all" empties it. For one group at a time, hold a single id instead (see awards-peek-drawer).
Each Collapsible takes isExpanded and onExpandedChange.
Why does the button change its label instead of using aria-expanded?
A button whose label changes ("Expand all", then "Collapse all") already says what it will do, and a label that changes together with aria-expanded is read twice over. The count line under it, "2 of 5 categories open", is a polite status, so a screen reader hears the result of every click.
Is a closed group's list in the page?
Yes: closed groups keep their awards in the page, folded to no height and made inert, so they are not read or reachable until the group opens.
Are these real awards?
No. Atlasfold is a made-up booking engine and Shoalbrook, Alderquist, Gildersby, Marlowcombe, Juniperfold, Nettlebrook, Orrinmere, Umberfield, Penwhistle and Elderquay are made-up programmes. The category marks are drawn by the block.
How does it fit on a phone?
The split collapses to one column: the header, the button and the count, then a rule and the groups, each row a full-width button with the mark, name and count. Open lists keep their indent and hairline. In a right-to-left layout the indent, the hairline and the divider move to the other side and the chevron keeps turning.