ComponentsNavigation & disclosure

Accordion

Shared primitive

Expand related sections independently or one at a time.

@/components/ui/accordion

Composition preview

Try Accordion alongside its related navigation & disclosure components. These examples keep all actions local.

Your draft preview appears here.

Usage

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

<>
<Accordion type="single" collapsible>
  <AccordionItem value="details"><AccordionTrigger>Details</AccordionTrigger>
    <AccordionContent>Supporting context.</AccordionContent>
  </AccordionItem>
</Accordion>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

type: single or multiple; collapsible; value/defaultValue; AccordionItem, AccordionTrigger, AccordionContent

Usage & accessibility

Use a real heading hierarchy and concise trigger labels.

Implementation contract

src/components/ui/accordion.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.