Introduction
The product kit. React components on the brand tokens, drawing the brand’s own files — so what you ship looks like Zostel without anyone checking.
What is in it
Button, Dialog, Tabs, Select, Toast and the rest — on Radix, so keyboards and screen readers just work.
Hostel cards, booking summaries, trips, itineraries, heroes, headers and footers.
The logo, the icons, LIVE IT. NOW, the verbs and the Indian patterns — from the brand’s own files.
Roundel, line, UI and duotone — plus an icon for each of the 84 places Zostel is live.
Points and lines from India, Nepal and Thailand, tone on tone, behind anything.
Lottie, CSS and framer-motion moves that honour reduced motion; useIsMobile, useToast, useTheme.
How it is built
It draws nothing of its own. Logos, icons, place icons, illustrations, patterns and Lotties are the files
brand/tools generates into
/brand. Change a drawing there and every
component follows.
Flat colour, brand tokens only. Warm Orange, Steel Grey, Beige and the five landscapes — no gradients, glows or bevels. Prices are grouped the Indian way (₹1,23,456).
Everyone can use it. Radix primitives for keyboards and screen readers; every moving part stops for people who ask their device for reduced motion.
Stack: React 19 · Radix UI · Tailwind CSS v4 (@theme)
· class-variance-authority · cmdk · vaul · react-day-picker 9 · react-hook-form · framer-motion · lottie-web.
A first screen
LIVE IT. NOW
A friend in every corner.
Manali, Himachal Pradesh
The rating and the amount are samples. The code below is this screen’s own file.
// A first screen of a Zostel app: the hero on a landscape, then a stay on an Indian pattern. The Introduction
// (/docs/components/introduction) draws it live from this very file and shows this file as its code, so the two can't
// drift apart. The rating and the amount are samples.
import React from "react";
import { Button, HeroSection, HostelCard, PatternBackground } from "zostel-ui";
export function Home() {
return (
<>
<HeroSection title="LIVE IT. NOW" subtitle="A friend in every corner." backgroundImage="/brand/scenes/valleys.svg">
<Button>Find a bed</Button>
</HeroSection>
<PatternBackground pattern="kolam" className="bg-zostel-beige p-8 text-zostel-grey">
<HostelCard
name="Zostel Manali"
location="Manali, Himachal Pradesh"
imageUrl="/brand/covers/wide/png/manali.png"
rating={4.6}
pricePerNight={1234}
tags={["Wi-Fi", "Café", "Treks"]}
onBook={() => {}}
className="mx-auto max-w-sm"
/>
</PatternBackground>
</>
);
}