Cart & Checkout
25 components for shopping carts, checkout flows, and order management
Cart Item Row
Product in cart with controls
When to useShopping cart, order summary.
Premium Widget Pro
Color: Midnight Blue • Size: Large
2
$159.98Order Summary
Price breakdown card
When to useCart, checkout pages.
Order Summary
Subtotal (3 items)$239.97
ShippingFree
Tax$19.20
Discount (SAVE20)-$47.99
Total$211.18
Checkout Steps
Multi-step progress
When to useCheckout flow, wizards.
CartShippingPaymentConfirm
Payment Methods
Payment option selector
When to useCheckout payment selection.
Shipping Address
Saved address selector
When to useCheckout, address management.
Home
123 Main St, San Francisco, CA 94102
Work
456 Market St, San Francisco, CA 94103
Shipping Options
Delivery speed selector
When to useCheckout shipping selection.
Standard
5-7 days
Express
2-3 days
Overnight
Next day
Credit Card Input
Card number with formatting
When to usePayment forms, checkout.
Promo Applied
Discount code badge
When to useCart summary, checkout.
SAVE2020% off applied
Trust Badges
Security and trust indicators
When to useCheckout footer, payment area.
SSL Secure
Buyer Protection
Free Returns
Empty Cart
No items state
When to useCart page when empty.
Your cart is empty
Looks like you haven't added anything yet
Order Confirmation
Success state with order details
When to usePost-checkout confirmation.
Order Confirmed!
Order #12345 • Confirmation sent to email
Estimated delivery
Dec 8-10, 2024
Mini Cart
Header cart dropdown
When to useNavigation cart preview.
Saved for Later
Wishlist in cart section
When to useCart page secondary items.
Saved for later (2)
Product Name
$49.99
Product Name
$49.99
Gift Wrap Option
Add gift wrapping toggle
When to useCart, checkout options.
Add gift wrapping
Include a personal message
Estimated Delivery
Delivery date preview
When to useCart, checkout, product page.
Free Delivery
Estimated: Dec 8-10
Quantity Stepper
Inline quantity control
When to useProduct pages, cart items.
1
Order Timeline
Order status tracking
When to useOrder details, tracking page.
Order placed
Dec 2, 10:30 AM
Payment confirmed
Dec 2, 10:31 AM
Shipped
Dec 3, 2:15 PM
Out for delivery
Pending
Delivered
Express Checkout
Quick payment options
When to useCart page top section.
Express checkout
or continue below
Billing Address Toggle
Same as shipping checkbox
When to useCheckout billing section.
Billing address same as shipping
Recently Viewed
Product recommendations
When to useCart page footer.
Recently Viewed
Product Name
$49.99
Product Name
$49.99
Product Name
$49.99
Product Name
$49.99
