Zostel
Stays Booking Summary

Booking Summary

Before you pay: the stay, the dates, who’s coming, each line and the total.

Preview

Your stay

Zostel Manali

Check-in
Fri, 16 Oct
Check-out
Mon, 19 Oct
Guests
2
Room
Mixed dorm
Mixed dorm · 3 nights · 2 beds₹1,234
Taxes₹123
Total₹1,357

Dates and amounts are samples, not prices.

Usage

tsx
import { BookingSummary } from "zostel-ui";

<BookingSummary
  hostelName="Zostel Manali"
  checkIn="Fri, 16 Oct"
  checkOut="Mon, 19 Oct"
  guests={2}
  roomType="Mixed dorm"
  lineItems={[
    { label: "Mixed dorm · 3 nights · 2 beds", amount: 1234 },
    { label: "Taxes", amount: 123 },
  ]}
  onConfirm={pay}
/>

Props

hostelName
Type: string
Default: —

The stay.

checkIn / checkOut
Type: string
Default: —

Dates, as you want them printed.

guests
Type: number
Default: —

How many.

roomType
Type: string
Default: —

Dorm or room.

lineItems
Type: { label: string; amount: number }[]
Default: —

Each line; the total is their sum.

currency
Type: string
Default: "INR"

ISO 4217 code: INR (₹1,23,456), NPR, THB (฿12,345)… Printed with formatPrice.

onConfirm
Type: () => void
Default: —

Shows the confirm button.

confirmLabel
Type: string
Default: "Confirm"

Its words.

className
Type: string
Default: —

More classes, merged with the component’s own (tailwind-merge).

Samples

The amounts, ratings and reviews in these demos are samples, not offers — the places are real (every Zostel place, from /brand/places/index.json).