Availability Strip
Night by night, what's free: the day, the date, how many are left or Full, and the rate if given. Seven a page, four on a phone.
Preview
6 bed mixed dorm: the next two weeks
What's free is a sample. With a rate, each night shows it too.
Usage
import { AvailabilityStrip } from "zostel-ui";
<AvailabilityStrip
days={nights.map((n) => ({ date: n.date, left: n.left, price: formatPrice(n.rate) }))}
unit={["bed", "beds"]}
label="Nights free in the 6 bed mixed dorm"
/>
{/* from an API: "YYYY-MM-DD" strings become local days */}
days={api.nights.map((n) => ({ date: dayFromISO(n.date), left: n.left }))}Props
| Prop | Type | Default | Description |
|---|---|---|---|
days | { date: Date; left: number; price?: ReactNode }[] | — | The nights in order; left of 0 or less shows Full. Each date is a calendar day at local midnight: make it with dayFromISO("2026-10-12") and print the strip in the browser (a server prints in its own zone). A day that isn’t a date is left out, with a warning in development. |
unit | [string, string] | ["bed", "beds"] | What is counted, singular and plural, for a screen reader (“2 beds left”). |
label | string | "Availability" | The strip’s name. |
className | string | — | More classes, merged with the component’s own (tailwind-merge). |
days{ date: Date; left: number; price?: ReactNode }[]The nights in order; left of 0 or less shows Full. Each date is a calendar day at local midnight: make it with dayFromISO("2026-10-12") and print the strip in the browser (a server prints in its own zone). A day that isn’t a date is left out, with a warning in development.
unit[string, string]["bed", "beds"]What is counted, singular and plural, for a screen reader (“2 beds left”).
labelstring"Availability"The strip’s name.
classNamestringMore classes, merged with the component’s own (tailwind-merge).
On zostel.com
Under each room, behind its calendar button, and open by itself under a sold-out room, so a traveller sees which nights would work. The round controls page through; when one turns off at the end, the focus moves to the other.