# Commerce

> Shop UI: cart drawers, product galleries, variant pickers, product pages, filters, order summaries and confirmations, with stock states, quantities and totals.

- [Size Guide](https://www.assembli.design/components/size-guide.md): A size guide dialog for product pages. Tops, Bottoms and Shoes tabs, a cm/in switch, and a measurement table whose hovered or focused cell lights its row and column like a crosshair. A flat drawing numbers each measurement and lights the one in use. Find my size takes height and chest (or your usual size) plus a preferred fit, and recommends a size with a match score.
- [Product Grid](https://www.assembli.design/components/product-grid.md): A collection page grid: breadcrumb, title and collection pills over a sticky toolbar with quick filters, sort and a 2, 3 or 4 column density toggle (1 or 2 on phones). Tiles swap to a second photo on hover, swatches change the shot, badges show New and −20%, a heart saves to the wishlist, and quick add rises with sizes and confirms in place. Load more fills a progress bar.
- [Product Quick View](https://www.assembli.design/components/product-quick-view.md): A quick-view dialog for product grids, built from Product Gallery and Variant Picker. Rating, price and savings, options with stock, a quantity stepper and Add to bag that confirms in place with View bag. Arrows and ← → step to neighbouring products without closing. Also exports QuickViewCard, a tile whose photo swaps on hover and whose Quick view button rises from its foot.
- [Invoice](https://www.assembli.design/components/invoice.md): A hosted invoice page: issuer and logo, bill-to and ship-to, dates, and a status that reads Draft, Open, Due soon, Overdue, Paid or Void. Line items fold into cards when narrow. Totals take a percent or fixed discount and tax lines. Pay now runs your async payment and a rubber PAID stamp lands on the page. Bank details copy in one tap, Download shows progress, and it prints as a clean paper copy.
- [Order Confirmation](https://www.assembli.design/components/order-confirmation.md): The thank-you page after checkout. A check draws itself in, the order number copies in a tap, and a delivery strip runs from Confirmed to Delivered with the estimated arrival. Items and totals sit beside shipping, delivery and payment details, with Track order and View receipt actions and an optional one-field "save your details" account nudge. Prints as a clean receipt.
- [Product Filters](https://www.assembli.design/components/product-filters.md): Faceted filters for a shop listing. Hand it your products and it counts every facet live: categories with counts, a price range over a histogram with typed min and max, color swatches, a size grid that strikes sizes nothing matches, a rating floor and an in-stock switch. Applied filters gather as chips, and below 1024px it becomes a bottom sheet ending in "Show 12 results". Exports filterProducts.
- [Order Summary](https://www.assembli.design/components/order-summary.md): The checkout sidebar. Line items carry quantity badges on their photos, a discount code field checks codes through your handler and shows the one applied as a removable tag (one per order; a bad code shakes), shipping methods are radio cards with arrival dates that turn free above a threshold, and totals roll digit by digit. On phones it folds behind a "Show order summary" bar.
- [Product Detail](https://www.assembli.design/components/product-detail.md): A complete product page section built from Product Gallery and Variant Picker. The buying column sticks while photos scroll: breadcrumbs, rating, a price that follows the selection with savings and installments, a quantity stepper, add to cart that confirms in place and turns into Notify me when sold out, a wishlist heart, perks and expanding detail sections.
- [Variant Picker](https://www.assembli.design/components/variant-picker.md): Product options as accessible radio groups: color swatches (solid or two-tone), a size grid with a gliding highlight, pills with a note line and image tiles. Hovering previews a value's name in the legend, stockOf strikes through sold-out values (still pickable for a notify-me flow) and dots low ones, and a status line reports stock for the full selection.
- [Product Gallery](https://www.assembli.design/components/product-gallery.md): A product page gallery: a scroll-snap stage that phones swipe with native momentum, hover magnification under the mouse, a thumbnail rail on the left or a strip below that keeps the active one in view, dots when it's narrow, and a fullscreen viewer with the same swipes, arrows and keys. A controlled index keeps it in step with a variant picker.
- [Cart Drawer](https://www.assembli.design/components/cart-drawer.md): A slide-over shopping cart on Base UI's Drawer. The quantity minus turns into a bin at one, stock caps show "Only 2 left", and a removed line leaves an undo strip that drains away. A meter counts toward free shipping, suggestions add in one tap, and prices roll as they change. Swipe it away on touch. Also exports CartButton, a bag icon whose count pops.

Back to [all components](https://www.assembli.design/components.md).