shadcn.io is not affiliated with official shadcn/ui
Cart Empty Checkout Block for Ark UI
An empty cart that helps you start: the Empty state over three fruit box kits, each with a What is in it disclosure and Add this kit, which fills the cart at the same height with a derived subtotal.
Installation
Overview
Let people who arrive at an empty cart start somewhere instead of leaving, with this empty cart for React with Ark UI. A compact header holds the title and one sentence from Orchardlea, a seasonal fruit box shop. Inside a hairline frame with a plus mark on each corner, the Empty state (an icon, "Your cart is empty", one sentence and a Browse the boxes link) sits over three starter kits, the Breakfast box, the Baking box and Gift under $30. Each kit is a row with its price and what it is for, a Collapsible called What is in it that opens its three lines with their prices, and an outline Button, Add this kit. Pressing it fills the cart: the body swaps, in the same height, to those three lines with a drawn thumbnail each, the subtotal worked out in whole cents and a ghost Clear cart that brings the empty state back. Continue to checkout is the only Shine Button; it stays in place and says it needs a kit while the cart is empty. For shops, subscriptions and any cart that can be empty.
FAQ
How does the body swap without moving anything?
The empty view and the filled view sit in the same grid cell, and the one that is not showing is invisible, inert and hidden from assistive technology, so the cell is always as tall as the taller one (the empty view, with its kits). Adding a kit or clearing the cart therefore never moves the foot, and focus follows the swap: to Clear cart after an add and to the first Add this kit after a clear, with a polite message saying what changed.
Where do the kits and their prices come from?
From the typed KITS list at the top of the file. Each kit has an id, a name, a sentence and three lines with a name, a size, a drawing and a price in whole cents; the kit's price and the subtotal are sums of those lines, so no figure is typed twice. Gift under $30 is $21.10 and stays under its name's limit; if you change a price, keep that true or rename the kit.
How does What is in it behave?
Each kit has its own Collapsible, so any number can be open, and a closed one is inert so its lines can't be reached by the keyboard. The disclosure is open or closed independently of the cart: opening one makes the empty view taller, never the filled view's content.
Is it accessible from the keyboard?
Yes. Every Add this kit button is named for its kit ("Add this kit: Baking box"), the disclosure triggers are buttons with an expanded state, the lists are named, and one polite status message in the foot reports each change. The Browse the boxes link is a Button with asChild around an a element.
What stays local in the demo, and how do I wire it up?
Everything. The cart is the block's state, Add this kit and Clear cart change only that state, and Continue to checkout only says that checkout comes next. In your app post the kit's lines to your cart API from add, show a failure in the same status line, and link Continue to checkout to your next step.