Zostel
Navigation Accordion

Accordion

Open one answer at a time — or several (Radix Accordion).

Preview

A bed, a common room and a way to travel. 111 Zostels in 80+ destinations across India, Nepal and Thailand, since 2013. Travel like a local — a friend in every corner.

Usage

tsx
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "zostel-ui";

<Accordion type="single" collapsible>
  <AccordionItem value="what">
    <AccordionTrigger>What is Zostel?</AccordionTrigger>
    <AccordionContent>
      111 Zostels in 80+ destinations across India, Nepal and Thailand, since 2013.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Accordion

type
Type: "single" | "multiple"
Default: —

One open at a time, or many.

collapsible
Type: boolean
Default: false

With type="single": the open one can close.

value / defaultValue
Type: string | string[]
Default: —

The open item(s).

onValueChange
Type: (value) => void
Default: —

Called when it changes.