Stays Hostel Card

Hostel Card

A Zostel in a list: its picture, name, place, tags, a price per night and one action.

Preview

Zostel Manali

4.6

Manali, Himachal Pradesh

Wi-Fi

Café

Treks

₹1,234 /night

The rating and the amount are samples.

Usage

tsx

import { HostelCard } from "zostel-ui";

<HostelCard
  name="Zostel Manali"
  location="Manali, Himachal Pradesh"
  imageUrl="/brand/scenes/valleys.svg"
  rating={4.6}
  pricePerNight={1234}
  tags={["Wi-Fi", "Café", "Treks"]}
  onBook={() => book("manali")}
/>

Props

Prop	Type	Default	Description
`name`	`string`	—	The stay: “Zostel Manali”, “Zostel Homes Bhor”.
`location`	`string`	—	Place and state.
`imageUrl`	`string`	—	A cover: a photo of the stay, or its landscape (/brand/scenes/<family>.svg). Never stock photos.
`rating`	`number`	—	Out of 5, on a badge.
`pricePerNight`	`number`	—	Shown as ₹1,234 /night.
`currency`	`string`	`"INR"`	ISO 4217 code: INR (₹1,23,456), NPR, THB (฿12,345)… Printed with formatPrice.
`tags`	`string[]`	`[]`	Amenities or what to do.
`onBook`	`() => void`	—	Shows the action button.
`actionLabel`	`string`	`"Book"`	The button’s word.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

name

Type: string

Default: —

The stay: “Zostel Manali”, “Zostel Homes Bhor”.

location

Type: string

Default: —

Place and state.

imageUrl

Type: string

Default: —

A cover: a photo of the stay, or its landscape (/brand/scenes/<family>.svg). Never stock photos.

rating

Type: number

Default: —

Out of 5, on a badge.

pricePerNight

Type: number

Default: —

Shown as ₹1,234 /night.

currency

Type: string

Default: "INR"

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

tags

Type: string[]

Default: []

Amenities or what to do.

onBook

Type: () => void

Default: —

Shows the action button.

actionLabel

Type: string

Default: "Book"

The button’s word.

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