Zostel
Stays Price Tag

Price Tag

A price in Warm Orange, grouped the Indian way (₹1,23,456), with its period and any discount.

Preview

Per night, per person, a discount

₹1,234/night
₹12,345/person
Was ₹1,234Now ₹987/night
20% off

Nepal and Thailand

Rs 1,234/night
฿456/night

Amounts are samples, not prices.

Usage

tsx
import { PriceTag, formatPrice } from "zostel-ui";

<PriceTag amount={1234} />                              {/* ₹1,234 /night */}
<PriceTag amount={12345} period="/person" />
<PriceTag amount={987} originalAmount={1234} />         {/* struck through, 20% off */}
<PriceTag amount={456} currency="THB" />                {/* ฿456 */}

formatPrice(123456);          // "₹1,23,456"

Props

amount
Type: number
Default: —

The price.

currency
Type: string
Default: "INR"

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

period
Type: string
Default: "/night"

After the amount; "" for none.

originalAmount
Type: number
Default: —

The price before a discount: struck through, with the % off.

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