Room Type Card

A detailed card for displaying room types with name, guest capacity, price per night, and a list of room amenities.

Preview

Mixed Dorm

Available

Shared room with 6 beds

Sleeps 6 guests

₹499 /night

Female Dorm

Available

Exclusive 4-bed dorm for women

Sleeps 4 guests

₹549 /night

Private Room

Available

Cozy private room with mountain view

Sleeps 2 guests

₹1299 /night

Deluxe Room

Sold Out

Premium room with balcony

Sleeps 2 guests

₹1999 /night

Usage

tsx

import { RoomTypeCard } from "zostel-ui";

<RoomTypeCard
  name="6-Bed Mixed Dorm"
  capacity={6}
  price={499}
  amenities={[
    "Personal reading light",
    "Individual locker",
    "Attached bathroom",
    "Fresh linen provided"
  ]}
  onSelect={() => console.log("Room selected")}
/>

Props

Prop	Type	Default	Description
`name`	`string`	—	Room type name (e.g. 6-Bed Mixed Dorm)
`capacity`	`number`	—	Maximum number of guests
`price`	`number`	—	Price per night
`amenities`	`string[]`	—	List of room amenities
`badge`	`string`	—	Optional badge label (e.g. Popular)
`onSelect`	`() => void`	—	Callback when Select Room is clicked
`className`	`string`	—	Additional CSS classes

name

Type: string

Default: —

Room type name (e.g. 6-Bed Mixed Dorm)

capacity

Type: number

Default: —

Maximum number of guests

price

Type: number

Default: —

Price per night

amenities

Type: string[]

Default: —

List of room amenities

badge

Type: string

Default: —

Optional badge label (e.g. Popular)

onSelect

Type: () => void

Default: —

Callback when Select Room is clicked

className

Type: string

Default: —

Additional CSS classes

Previous Amenity Card Next Review Card