Accordion

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

const items = [
  {
    value: "shipping",
    title: "How long does shipping take?",
    content:
      "Orders ship within two business days and arrive in three to five days.",
  },
  {
    value: "returns",
    title: "Can I return an item?",
    content:
      "Items can be returned within 14 days of delivery for a full refund.",
  },
  {
    value: "support",
    title: "How do I contact support?",
    content:
      "Reach the support team from the help center, available around the clock.",
  },
]

export default function AccordionDemo() {
  return (
    <div className="w-96">
      <Accordion>
        {items.map((item) => (
          <AccordionItem key={item.value} value={item.value}>
            <AccordionTrigger>{item.title}</AccordionTrigger>
            <AccordionContent>{item.content}</AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  )
}

Accordion wraps the accordion primitive of the chosen base. An Accordion holds one or more AccordionItem parts; each item pairs an AccordionTrigger with an AccordionContent panel. The trigger renders inside a heading element and shows a caret that flips between down and up as the panel opens and closes.

Use an accordion to shorten long pages of related content, such as FAQs or settings groups, where people only need one or a few sections at a time. For a single show-and-hide region, a collapsible is a lighter fit.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/accordion

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add accordion

Manual

1. Install the dependencies and add the cn helper:

$ pnpm add @base-ui/react @phosphor-icons/react class-variance-authority

2. Copy the source into components/ui/accordion.tsx:

3. Update the import paths to match your project.

Usage

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } 

<div

Give each AccordionItem a unique value. By default only one panel is open at a time; opening another closes the previous one. Set multiple on Accordion to let several panels stay open.

The open state is an array of item values. Use defaultValue (for example ["shipping"]) for uncontrolled use, or value with onValueChange to control it.

Examples

Filled

The filled variant places the items on a rounded bg-muted surface.

By default

Opens an item on first render with defaultValue.

Multiple

Keeps several panels open at once with multiple.

API Reference

Accessibility

• Each trigger is a button with aria-expanded reflecting its panel's state.
• Triggers are wrapped in a heading element.
• Triggers are reachable with Tab; Enter and Space toggle the focused panel.
• Disabled triggers receive aria-disabled and are dimmed with opacity-50.

Notes

• Styling hooks: data-slot="accordion", "accordion-item", "accordion-trigger", "accordion-trigger-icon" and "accordion-content".
• The panel animates with animate-accordion-down and animate-accordion-up on data-open and data-closed.
• className on AccordionContent applies to the inner padded wrapper, not the animated panel.

Accordion groups AccordionItems, each with an AccordionTrigger and an AccordionContent panel. The root and items are Reanimated views with a layout transition, so items below move smoothly as a panel opens or closes, and the trigger's caret rotates as it opens.

The default variant draws items on the page background separated by hairlines. The filled variant puts the whole list on a rounded bg-muted surface, which suits grouped settings or FAQ cards.

Installation

$ pnpm dlx shadcn@latest add @esuiss-rn/accordion

$ pnpm dlx @esuiss/ui@latest add accordion

$ pnpm dlx @esuiss/ui@latest add accordion --platform swift