Introduction
A comprehensive React component library built for the Zostel brand ecosystem.
What is Zostel UI?
zostel-ui is a production-ready component library that brings together accessible UI primitives, brand-specific elements, travel-domain components, custom icons, hand-crafted illustrations, animations, and utility hooks — all styled with the Zostel brand identity.
Built on top of Radix UI for accessibility, Tailwind CSS v4 for styling, and Zostel brand tokens for visual consistency, every component ships with dark mode support, responsive behaviour, and composable APIs.
What's Included
Button, Dialog, Tabs, Select, Toast, and more — built on Radix UI.
Logo, Tagline Band, Theme Lines, Pattern Background, Gradient, Brand Header.
Hostel Card, Booking Summary, Search Bar, Itinerary Timeline, and more.
SVG icons across activities, amenities, facilities, navigation, and travel.
Hand-crafted SVG illustrations for destinations, activities, and empty states.
Lottie animations and CSS keyframe utilities for micro-interactions.
useIsMobile, useToast, and useTheme for common app-level logic.
Architecture
The library follows the shadcn/ui philosophy: components live in your project, are fully customisable, and use composition over configuration.
zostel-ui/ ├── src/ │ ├── components/ │ │ ├── ui/ # 45 Radix-based primitives │ │ ├── brand/ # 6 brand identity components │ │ ├── travel/ # 28 travel-domain components │ │ ├── icons/ # 55 categorised SVG icons │ │ ├── illustrations/ # 58 hand-crafted illustrations │ │ └── animations/ # 3 Lottie + CSS animations │ ├── lib/ │ │ ├── hooks/ # 3 React hooks │ │ └── utils.ts # cn() helper (clsx + tailwind-merge) │ └── styles/ │ └── globals.css # Brand tokens + Tailwind v4 theme └── package.json
Tech Stack
Accessible, unstyled primitive components that handle WAI-ARIA patterns, keyboard navigation, and focus management out of the box.
Utility-first styling with the new @theme directive for design tokens, zero-config CSS variables, and automatic dark mode.
Colours (Zostel Orange, Grey, Beige + 5 secondary palettes), typography (Futura, Gotham Narrow, Mrs Eaves), spacing, radii, and animation durations — all as CSS variables.
Type-safe component variants with cva() for defining size, colour, and state variations without prop sprawl.
Quick Example
Import a component and use it with Zostel brand styling applied automatically:
import { Button, ZostelLogoFull, HostelCard } from 'zostel-ui'; export default function App() { return ( <div> <ZostelLogoFull size={48} /> <Button variant="default">Book Now</Button> <HostelCard name="Zostel Manali" price={499} /> </div> ); }