Skip to main contentSkip to sidebarSkip to headerSkip to footer

Accordion

A vertically stacked set of interactive headings that reveal sections of content.

Installation

Import the component from the passport-ui package.

components/example.tsx
1
2
3
4
5
6
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "passport-ui";

Usage

Basic example showing how to use the component.

components/example.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<Accordion type="single" collapsible className="w-sm">
  <AccordionItem value="item-1">
    <AccordionTrigger>Product Information</AccordionTrigger>
    <AccordionContent className="flex flex-col gap-4 text-balance">
      <p>
        Our flagship product combines modern technology with sleek design.
        Built with materials, it offers unparalleled performance and
        reliability.
      </p>
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Shipping Details</AccordionTrigger>
    <AccordionContent className="flex flex-col gap-4 text-balance">
      <p>
        We offer worldwide shipping through trusted courier partners.
        Standard delivery takes 3-5 business days.
      </p>
    </AccordionContent>
  </AccordionItem>
</Accordion>

Additional resources

Documentation and examples are available in Storybook.

View in Storybook ↗