Booking Summary

A structured card displaying booking details, line-item pricing with room cost and taxes, a total amount, and a confirm booking call-to-action.

Preview

Booking Summary

Zostel Manali

Check-in

Mar 15, 2026

Check-out

Mar 18, 2026

Guests

Room Type

Mixed Dorm

Mixed Dorm × 3 nights × 2 guests₹2994

Taxes & Fees₹359

Total₹3353

Usage

tsx

import { BookingSummary } from "zostel-ui";

<BookingSummary
  property="Zostel Manali"
  room="6-Bed Mixed Dorm"
  checkIn="2026-02-15"
  checkOut="2026-02-17"
  lineItems={[
    { label: "Room (2 nights x \u20B9499)", amount: 998 },
    { label: "Taxes & Fees", amount: 90 },
  ]}
  total={1088}
  onConfirm={() => console.log("Confirmed")}
/>

Props

Prop	Type	Default	Description
`property`	`string`	—	Hostel property name
`room`	`string`	—	Selected room type name
`checkIn`	`string`	—	Check-in date
`checkOut`	`string`	—	Check-out date
`lineItems`	`{ label: string; amount: number }[]`	—	Itemized cost breakdown
`total`	`number`	—	Total booking amount
`currency`	`string`	"INR"	Currency code for formatting
`onConfirm`	`() => void`	—	Callback when Confirm Booking is clicked
`className`	`string`	—	Additional CSS classes

property

Type: string

Default: —

Hostel property name

room

Type: string

Default: —

Selected room type name

checkIn

Type: string

Default: —

Check-in date

checkOut

Type: string

Default: —

Check-out date

lineItems

Type: { label: string; amount: number }[]

Default: —

Itemized cost breakdown

total

Type: number

Default: —

Total booking amount

currency

Type: string

Default: "INR"

Currency code for formatting

onConfirm

Type: () => void

Default: —

Callback when Confirm Booking is clicked

className

Type: string

Default: —

Additional CSS classes

Previous Price Tag Next Gallery