delivery-slot

Delivery Slot

Delivery card with standard and express tabs, a calendar of bookable days, a row of time windows, the chosen slot with its price, and a confirm button.

States: Default

Parts

PartFileDoes
DeliverySlotDeliverySlot.vueLets the shopper pick standard or express delivery, a day and a delivery window.

Styling

PartRecipe
DeliverySlothint
DeliverySlotdelivery-slot-price

Install

Writes 3 files into components/sections/delivery-slot/. For agents, npx @frontic/ui docs delivery-slot prints this reference as markdown; the MCP server serves the same.

npm packages
@internationalized/date
@lucide/vue
reka-ui

Built from

API reference

DeliverySlot DeliverySlot.vue

Lets the shopper pick standard or express delivery, a day and a delivery window.

PropTypeDefault
windows*DeliveryWindow[]—
titlestring'Delivery'
descriptionstring—
standardLabelstring'Standard'
expressLabelstring'Express'
expressNoticeDeliveryNotice—
dayLabelstring'Day'
dayHintstring—
defaultPlaceholderDateValue—
minValueDateValue—
maxValueDateValue—
isDateUnavailable((date: DateValue) => boolean)—
localestring'en'
weekStartsOn0 | 1 | 2 | 3 | 4 | 5 | 60
windowLabelstring'Time window'
windowAriaLabel((label: string) => string)`Between ${label}`
pricePriceType—
freeLabelstring'Free'
slotLabel((day: DateValue | undefined, window: DeliveryWindow | undefined) => string)—
confirmLabelstring'Confirm delivery slot'
surface'raised' | 'bare''raised'
classClassValue—
speedstring'standard'
dayDateValue—
windowstring—
EventPayload
update:speedvalue: string
update:dayvalue: DateValue | undefined
update:windowvalue: string | undefined
confirmslot: { speed: string; day?: DateValue | undefined; window?: string | undefined; }
Data attributeValues
data-surface'raised' | 'bare'
Recipe hintSets
base: hint 2 properties
Recipe delivery-slot-priceSets
base: delivery-slot-price 2 properties · 1 inherited
Example