Cart with quantity steppers, an order summary, checkout form and confirmation.
npx shadcn@latest add @lokalhost/cart-checkoutAlso installs Buttons.
The source is copied to screens/cart-screen.tsx — it’s yours to edit.
import { CartScreen, type CartItem } from "@/screens/cart-screen";
return (
<CartScreen
items={items}
onQuantityChange={(id, qty) =>
setItems((list) => (qty === 0 ? list.filter((i) => i.id !== id) : list.map((i) => (i.id === id ? { ...i, qty } : i))))
}
onCheckout={() => router.push("/checkout")}
/>
);| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | CartItem[] | — | { id, name, variant, price, qty }. |
onQuantityChangerequired | (id: string, qty: number) => void | — | Qty 0 removes the line. |
onCheckoutrequired | () => void | — | Primary action. |
shipping | number | 0 | Shipping cost added to the summary. |