shadcn.io is not affiliated with official shadcn/ui
Cart Sheet Preview Navbar Block for Ark UI
A one-bar navbar for a craft shop whose bag button opens a sheet from the end: steppers, remove buttons, a free-shipping meter and a subtotal worked out from the lines.
Installation
Overview
A navbar with a working bag in React with Ark UI. The wordmark of Thimbleberry, a craft-supply shop, leads, and Yarn, Fabric, Notions and Kits follow as plain links, the current page marked by a foreground stroke on the bar's bottom edge. At the end of the bar a bag button shows how many things are in it; pressing it opens a sheet from the end of the page with three lines, each with a stepper that never goes below one, a remove button and its own total. Above the lines a meter says "You’re $16.00 away from free shipping" and fills as the bag grows; below them the subtotal is worked out from the lines, with a Checkout Shine Button. Every figure is derived from the same list, so the bar's count, the meter, the subtotal and the line totals follow each change, a polite status says what changed, and removing the last line leaves an empty state. On a phone the sheet nearly fills the screen and a menu button opens a sheet from the top with the links. It's built from Sheet, Progress, Badge, Button, Navigation Menu, Shine Button and Guides. For stores where a shopper checks the bag without leaving the page.
FAQ
How do I use my own bag?
Edit START at the top of the file (an id, a name, a note, an icon, a price in cents and a quantity), FREE_FROM for the shipping threshold in cents and MOST for the largest quantity. In a real store, replace the useState with your cart's state and keep step and remove as the two ways it changes.
Where do the figures come from?
Nothing is typed twice: countOf and subtotalOf read the lines, the meter's remainder is the threshold minus the subtotal (so it reaches "Your bag ships free" on its own), and each line's total is its price times its quantity. Prices are cents, formatted by one money() helper, and each amount sits in its own left-to-right span so a currency sign never moves in right-to-left layouts.
How does it work with a keyboard?
The bag button opens the sheet and moves focus into it; Escape or the close button closes it and focus returns to the bag button. Inside, each line has a fewer button, a more button and a remove button. At one, the fewer button stays focusable but does nothing (it is aria-disabled, so focus is never dropped). Removing a line moves focus to the remove button that took its place, or to Continue shopping when the bag is empty.
How do screen reader users hear a change?
A polite status inside the sheet is empty until something changes, then says, for example, "Merino worsted: 3. Subtotal $38.00, 5 items." The bag button's own name carries the count ("Bag, 4 items"), and the meter is decoration: the sentence above it says the same thing.
How does it work on a phone?
Below md the links fold into a menu button that opens a sheet from the top, and the bag button stays in the bar, shrinking to its icon and count. The bag sheet takes the screen but for a sliver, and its list scrolls while the header, meter and subtotal stay put. It fits at 320 pixels.
Which edge does the sheet open from?
The end of the page: the right edge in left-to-right layouts and the left edge in right-to-left ones, where its border moves to the other side too.
How do I point the links and Checkout at my own pages?
Edit PAGES: the bar and the menu sheet read it, and the page you're on takes aria-current="page". Checkout points at #: in this demo nothing is paid and nothing is sent, and the bag resets when the page reloads.
Checkout takes asChild with the link inside, so it can be your router's link.