Brand Switcher

A dropdown switcher for navigating between Zostel sub-brands: Zostel, Zostel Plus, Zostel Homes, Zo Trips, and Zo House.

Preview

Usage

tsx
import { BrandSwitcher } from "zostel-ui";

<BrandSwitcher
  brands={[
    { name: "Zostel", description: "Backpacker hostels", color: "#F1563F" },
    { name: "Zostel Plus", description: "Premium hostels", color: "#43474B" },
    { name: "Zostel Homes", description: "Private homestays", color: "#8B6F47" },
    { name: "Zo Trips", description: "Group adventures", color: "#2563eb" },
    { name: "Zo House", description: "Co-living spaces", color: "#16a34a" },
  ]}
  selected="Zostel"
  onSelect={(brand) => console.log(brand)}
  variant="dropdown"
/>

Props

brands
Type: Brand[]
Default: —

Array of brand objects with name, description, and color

selected
Type: string
Default: —

Currently selected brand name

onSelect
Type: (brand: Brand) => void
Default: —

Callback when a brand is selected

variant
Type: "dropdown" | "tabs"
Default: "dropdown"

Visual variant
Previous Search Bar Next Mobile Nav