Stays Room Type Card

Room Type Card

A dorm or a room: who it sleeps, the price per night, open or full.

Preview

Mixed dorm

Open

Bunks, lockers, a reading light each.

Sleeps 6

₹1,234 /night

Female dorm

Open

For women travellers.

Sleeps 4

₹1,345 /night

Private room

Full

A room of your own, the common room downstairs.

Sleeps 2

₹3,456 /night

Amounts are samples, not prices.

Usage

tsx

import { RoomTypeCard } from "zostel-ui";

<RoomTypeCard
  type="Mixed dorm"
  description="Bunks, lockers, a reading light each."
  capacity={6}
  pricePerNight={1234}
  onSelect={() => pick("mixed-dorm")}
/>
<RoomTypeCard type="Private room" capacity={2} pricePerNight={3456} available={false} />

Props

Prop	Type	Default	Description
`type`	`string`	—	“Mixed dorm”, “Female dorm”, “Private room”…
`description`	`string`	—	One line.
`capacity`	`number`	—	Sleeps n.
`pricePerNight`	`number`	—	Per night.
`currency`	`string`	`"INR"`	ISO 4217 code: INR (₹1,23,456), NPR, THB (฿12,345)… Printed with formatPrice.
`available`	`boolean`	`true`	false greys it out and shows Full.
`imageUrl`	`string`	—	Optional picture.
`onSelect`	`() => void`	—	Shows the Select button (disabled when full).
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

type

Type: string

Default: —

“Mixed dorm”, “Female dorm”, “Private room”…

description

Type: string

Default: —

One line.

capacity

Type: number

Default: —

Sleeps n.

pricePerNight

Type: number

Default: —

Per night.

currency

Type: string

Default: "INR"

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

available

Type: boolean

Default: true

false greys it out and shows Full.

imageUrl

Type: string

Default: —

Optional picture.

onSelect

Type: () => void

Default: —

Shows the Select button (disabled when full).

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).