shadcn.io is not affiliated with official shadcn/ui
Mini Cart Storefront Block for Radix UI
The just-added peek: a product host with a format choice, an Add button and a Bag button that opens a popover showing the line just added, the bag subtotal, View bag, Checkout and one goes-with row.
Installation
Overview
Confirm an add without sending the shopper away, with this mini cart for React with Radix UI. A header names the shop, Bobbin & Bell, and says what the block is. A hairline frame with a plus mark on each corner is the product page's host: a drawn linen notebook, two formats as native radios drawn as pills, an Add Button and a Bag button with its count in a Badge. Bag is the real trigger of a non-modal Popover that is closed on load. Add raises the count and opens it, showing the line just added with its drawing and format, the bag's item count and subtotal worked out in whole cents, View bag as an outline button, Checkout as the one Shine Button and one "goes with" row whose Add puts a second line in the bag and moves the subtotal. Escape closes the peek and focus returns to Bag. A status line in the foot says what each press did. It's built from Popover, Button, Badge, Shine Button and Guides, with a CSS entrance only. For a product page, a quick-add shelf or any shop where an add should answer in place.
FAQ
How do I fill it with my own products?
Edit ITEMS: each has an id, a name, a variant line, a price in whole cents and a kind that picks its drawing from SHAPES. COMPANION names the item in the goes-with row. The two formats on the host are the first two items. The bag, its count and its subtotal are derived from the lines in state.
How does the peek open and close?
Add opens it, the Bag button toggles it, and Escape or a click outside closes it. It is not modal, so the page behind stays readable and nothing is trapped. When it closes, focus returns to the Bag button. It's closed on load, so the first screen is the product and the Add button.
What does the goes-with row do?
Its Add puts the pen clip in the bag as a second line without changing which line is "just added". The subtotal and the count in the peek and the Bag badge follow, and the row notes how many of it are in the bag. It is a typed suggestion; replace it with a call to your recommendations.
What stays local, and how do I wire it to a real bag?
The bag is component state; View bag and Checkout only say that no page opens in this demo. To wire it up, replace addPick and addCompanion with calls to your cart API, set the lines from the response, and point the two buttons at your routes. Keep the Popover as it is.