Hostel Card

A rich listing card for displaying hostel properties with image, name, location, rating, amenity tags, price, and a booking call-to-action.

Preview

Zostel Manali

4.5

Manali, Himachal Pradesh

WiFi

Cafe

Bonfire

₹499 /night

Usage

tsx

import { HostelCard } from "zostel-ui";

<HostelCard
  name="Zostel Manali"
  location="Manali, Himachal Pradesh"
  rating={4.5}
  tags={["WiFi", "Cafe"]}
  price={499}
  currency="INR"
  imageUrl="/images/manali.jpg"
  onBook={() => console.log("Booking...")}
/>

Props

Prop	Type	Default	Description
`name`	`string`	—	Hostel property name
`location`	`string`	—	City and state of the hostel
`rating`	`number`	—	Guest rating value (1-5)
`tags`	`string[]`	—	Amenity or feature tags to display
`price`	`number`	—	Starting price per night
`currency`	`string`	"INR"	Currency code for price display
`imageUrl`	`string`	—	URL of the hostel cover image
`onBook`	`() => void`	—	Callback when Book Now is clicked
`className`	`string`	—	Additional CSS classes

name

Type: string

Default: —

Hostel property name

location

Type: string

Default: —

City and state of the hostel

rating

Type: number

Default: —

Guest rating value (1-5)

tags

Type: string[]

Default: —

Amenity or feature tags to display

price

Type: number

Default: —

Starting price per night

currency

Type: string

Default: "INR"

Currency code for price display

imageUrl

Type: string

Default: —

URL of the hostel cover image

onBook

Type: () => void

Default: —

Callback when Book Now is clicked

className

Type: string

Default: —

Additional CSS classes

Previous Motion Wrappers Next Destination Card