Accordion

Import

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@retents/ui/accordion"

Usage Guidelines

When to use

• For FAQ sections, grouped settings, or any content that benefits from progressive disclosure.
• When screen space is limited and users don't need to see all content at once.
• Use type="single" collapsible when only one section should be open, or type="multiple" when users may need several sections open.

When NOT to use

• For switching between distinct views on the same page — use Tabs instead.
• For a single show/hide toggle — use Collapsible instead.
• For page-level navigation — use proper navigation components.

Preview

Usage

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Source