A compact checkout step for contact, address and delivery method, with saving, confirmation and retry states.
pnpm dlx shadcn@latest add @latheui/delivery-detailsPart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Delivery Details is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Delivery details" | Visible heading and accessible section name. |
| defaultValues | Partial<DeliveryValues> | — | Initial email, address, city, postalCode and method. Values are managed internally. |
| options | DeliveryOption[] | — | Available methods with value, label, optional description and disabled state. Defaults to sample Standard and Express choices. |
| onContinue | (values: DeliveryValues) => void | Promise<void> | — | Persist or validate delivery in your app. Resolve to confirm, reject with an error to offer retry. Omitting it confirms locally. |
| disabled | boolean | false | Disable all fields and submission. |
| className | string | — | Override the compact card layout. |
| Prop | Type | Default | Description |
|---|---|---|---|
| email / address / city / postalCode* (required) | string | — | Contact and delivery address fields. |
| method* (required) | string | — | Selected delivery option value. |
Use this address step beside an order summary, and store the returned values in your checkout flow. Validate shipping rates on your server.
<div className="grid items-start gap-5 md:grid-cols-2">
<DeliveryDetails onContinue={saveDelivery} />
<OrderSummary item={item} onPay={startPayment} />
</div>