Make
Components
Build with the brand. 104 React components and 3 hooks on the Zostel tokens — the same colours, type, icons and places as every page here. Pick one. Copy it. Ship it.
Forms
Ask, pick, type, book.
- Button Book, join, go — the action on every screen.
- Input One line of text: a name, a place, an email.
- Textarea Room to say more.
- Label Names a field, and focuses it on click.
- Select Pick one from a list.
- Checkbox Yes or no, one at a time or many.
- Radio Group Pick exactly one.
- Switch On or off, right now.
- Slider Slide to a number.
- Quantity Stepper One fewer, one more: beds, guests, nights.
- Combobox Type to find, then pick.
- Calendar Pick a day to arrive.
- Date Picker A day, or the nights you stay, from one button.
- Form Fields, checks and errors that say what to fix.
Layout
Hold things, group things, show progress.
- Card A white card with a beige edge.
- Badge A small label: new, full, open.
- Separator A quiet line between things.
- Table Rows and columns.
- Avatar A face — a Zobu, a photo or initials.
- Progress How far along.
- Skeleton The shape of what is loading.
- Scroll Area A box that scrolls on its own.
- Aspect Ratio Keeps a picture in shape.
- Carousel Swipe through, one at a time.
Overlays
Open on top, close with Esc.
- Dialog Stop and decide.
- Sheet A panel from the side.
- Drawer A panel from the bottom, made for thumbs.
- Alert Dialog Sure? For things you can’t undo.
- Dropdown Menu More actions, one click away.
- Context Menu Right-click for more.
- Popover A small panel by its button.
- Hover Card A preview on hover.
- Tooltip A word of help.
- Command Type to jump anywhere.
Feedback
Say what happened.
Brand
The mark, the icons, the line and the patterns — from the brand files.
- Zostel Logo The six-Z symbol and the lockups.
- Icons Every brand icon and every place, as components.
- Tagline Band LIVE IT. NOW on Steel Grey.
- Theme Lines Four verbs, stacked: RUN · CLIMB · CHASE · LAUGH.
- Brand Header The logo over the tagline band.
- Pattern Background Indian patterns, tone on tone, behind anything.
- Empty State Nothing here yet — a drawing, a line and the way on.
- Not Found The 404: off the map, and the way back.
- Zobu Loader Zobu waves while it loads.
Motion
Depart quickly, travel steadily, arrive softly.
Stays
Beds, rooms, prices and the people who stayed.
- Stay Search Where to, check-in to check-out, Search.
- Hostel Card A Zostel, its tags and a Book button.
- Room Type Card A dorm or a room, who it sleeps.
- Room Option A room to add: Select turns into a stepper.
- Availability Strip Night by night, what’s free.
- Stay Facts Know before you go: check-in, group size, the walk up.
- Guest Picker Adults and children, a stepper each.
- Activity Card What’s on at the house this week.
- Property Listing Card A stay in a list of stays.
- Amenity Card Wi-Fi, café, lockers — as roundels.
- Price Tag A price, per night, grouped the Indian way.
- Booking Summary Dates, guests, lines and the total.
- Booking Bar The amount and the one way on, always in reach.
- Cancellation Timeline Free, a fee, no refund: from when.
- Currency Picker ₹ INR: the currency rates are shown in.
- Review Card What one traveller said.
- Star Rating Five stars, to show or to give.
- Gallery Swipe through a place.
- Photo Gallery Three on the page, every photo a tap away.
Trips & places
Where to go and how the days run.
- Destination Card A place, its colour and its icon.
- Trip Card Days, dates and what you’ll do.
- Departure Picker Pick a departure: dates and seats left.
- Highlight List A trip’s best bits, one line each.
- Itinerary Timeline Day by day, stop by stop.
- Map Embed The place on a map.
- Search Bar Where next? Type a place.
- Filter Bar Filter pills: all, dorms, rooms.
Site
The pieces every page is built from.
- Hero Section The first screen: a landscape and a line.
- Navigation Header The logo, the links, one action.
- Mobile Nav The menu on a phone.
- Footer The band, the lockup, the links.
- Brand Switcher Zostel, Zostel Plus, Zostel Homes, Zo.
- Social Links Where to follow along.
- Stat Counter 111 Zostels · 80+ destinations · 5M+ travellers.
- USP Grid Three reasons, three icons.
- Blog Card A story from the road.
- Offer Banner Stays on offer, one at a time.
- CTA Card Another way in: a group trip, a franchise.
- Newsletter Signup Stories from the road, in your inbox.
- Testimonial Carousel Travellers, in their words.
- App Download Banner Take Zostel in your pocket.
- Dark Mode Toggle Day or night.
Hooks
Logic without a look.
New here?
What the kit is, how to add it, how to theme it.