shadcn.io is not affiliated with official shadcn/ui
Grouped Items Checkout Block for React Aria
A fourteen-item garden order folded into three groups in an accordion: each header shows its drawn tile, item count and subtotal, each open group lists its lines with a named Remove, and Expand all opens every group.
Installation
Overview
Make a long order readable at a glance, with this grouped cart for React with React Aria. A compact header from Larkspur Supply, a garden centre, holds the title, one sentence and an outline Expand all Button that turns into Collapse all. Inside a hairline frame with a plus mark on each corner, an Accordion that can hold several groups open folds fourteen items into Tools, Plants, and Soil and pots. Each group's header has a small drawn tile, its name, how many items it holds and its subtotal; an open group lists its lines compactly, with the name, the quantity, the line total and a Remove that names the item. Removing a line updates its group, the counts and the total, which counts to its new value (Counting Number); removing a group's last line removes the group, and removing everything leaves an Empty state with a way to put the order back. There are no steppers here: this is for reading a big order. The foot says what changed in a polite status line beside Continue to delivery, the only Shine Button. It's built from Accordion, Button, Counting Number, Empty, Shine Button and Guides, with a CSS entrance only. For big baskets, wholesale orders and any cart that needs a summary by kind.
FAQ
How do I fill it with my own order?
Edit GROUPS and LINES at the top. A group has an id and a name; a line has an id, a name, the group it belongs to, a qty and a unit price in whole cents. Each group's item count and subtotal, the order total and the number of groups are worked out from the lines, so nothing is typed twice. A group with no lines is not drawn. The tile's drawing comes from GLYPHS, a few strokes per group.
How do the groups open and close?
The accordion keeps a list of open groups, so any number can be open at once; only Tools starts open. Expand all opens every group that still has lines and the label becomes Collapse all, and the status line says which happened. Each group's trigger is a heading button named by its name, its item count and its subtotal. Tab moves between the triggers.
What happens when I remove a line?
The line goes, its group's count and subtotal update, the total counts to its new value, and the status line says what was removed and what is left. Focus moves to the next line's Remove in the same group (or the one before it), so you can keep going from the keyboard; when a group empties it is removed and focus goes to the Expand all button. Nothing is deleted anywhere: the order lives in the block's state.
What does the empty state hold?
When the last line goes, the groups are replaced by an empty state with an icon, "Nothing left in the order", one sentence and a Put the sample order back button. The height the list had a moment earlier is held, so the totals and the foot don't jump; focus lands on the restore button. Continue to delivery stays in place and says to add an item first.
How does it look on a phone?
The group headers keep the tile, the name, the count and the subtotal; an open group's lines drop the unit price and keep the quantity, the line total and a Remove icon with its name for a screen reader. The foot is pinned to the bottom of the screen while you scroll and settles at the panel's end from the medium breakpoint.
What stays local, and how do I wire it up?
Everything: the order is state in this file and Continue to delivery only says that delivery comes next. In your app keep the lines in your cart store, send each removal to your API, group by the category your catalog already has, and make Continue to delivery a link to your next step.