A cart sheet with quantity steppers, line notes, delivery or pickup, area fees from props, payment choice, a coupon field and a Send order button with a confirmation state.
Your details
Payment
Coupon
npx shadcn@latest add https://hyperblur.dev/r/order-cart-drawer.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/order-cart-drawer.tsx.
import { OrderCartDrawer } from "@/components/hyperblur/order-cart-drawer"
<OrderCartDrawer defaultOpen onSubmit={(order) => console.log(order.total, order.items)} />| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | Controlled open state of the drawer. | |
| defaultOpen | boolean | false | Initial open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | Called when the drawer asks to open or close (close button, scrim, Escape). | |
| inline | boolean | false | Render the panel in the page flow instead of a modal drawer. It fills the parent height. |
| items | CartLine[] | Controlled cart lines. A line is { id, name, price, quantity, options?, note?, color? }. | |
| defaultItems | CartLine[] | 3 burger joint items | Initial lines when uncontrolled. |
| onItemsChange | (items: CartLine[]) => void | Called when a quantity, note or removal changes the lines. | |
| mode | "delivery" | "pickup" | Controlled order mode. | |
| defaultMode | "delivery" | "pickup" | "delivery" | Initial mode when uncontrolled. |
| onModeChange | (mode) => void | Called when the Delivery / Pickup control changes. | |
| areas | { id: string; label: string; fee: number; eta?: string }[] | 4 neighborhoods | Delivery areas with a fixed fee each. The fee of the chosen area is added to the total. |
| defaultAreaId | string | Area selected at start. Empty asks the customer to choose. | |
| store | { name: string; address: string; readyTime?: string } | Corner Kitchen, 214 Grand Street | Shown when Pickup is selected. |
| paymentMethods | { id: string; label: string; hint?: string; icon?: "cash" | "card" | "instant" | "wallet" }[] | Pay on delivery, Card, Instant transfer | Payment options shown as radio cards. |
| defaultPaymentId | string | Initially selected payment. Defaults to the first method. | |
| onApplyCoupon | (code: string, subtotal: number) => { code; discount; label? } | null | Promise<...> | Validates a coupon. Return the discount amount to apply it or null to show the invalid message. | |
| onSubmit | (order: CartOrder) => void | Promise<void> | Called with items, mode, area, customer, address, payment, coupon and every amount. The confirmation shows when it resolves. | |
| onNewOrder | () => void | Called from the confirmation screen. Uncontrolled lines are cleared. | |
| currency | string | "USD" | ISO currency code used with Intl.NumberFormat for every amount. |
| locale | string | "en-US" | Locale used to format amounts. |
| theme | "dark" | "light" | "dark" | Color scheme of the panel. |
| accent | string | "#2f7bff" | Color of the main button, selected states and focus rings. |
| labels | Partial<OrderCartDrawerLabels> | { title: "Your order", submit: "Send order", ... } | Every visible string, from the title and field names to the confirmation text. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles on the root element. |