shadcn.io is not affiliated with official shadcn/ui
Collapsible List Awards Block for Svelte
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 Svelte with Ark UI. 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 open and onOpenChange({ open }).
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, hidden, 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.