Command Palette

Search for a command to run...

Accordion

shadcn/ui

A vertically stacked set of interactive headings that each reveal a section of content.

Accordion

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/components/optics/accordion";<Accordion  className="w-full max-w-md"  collapsible  type="single">  <AccordionItem value="item-1">    <AccordionTrigger>      Is it accessible?    </AccordionTrigger>    <AccordionContent>      Yes. It adheres to the WAI-ARIA design pattern.    </AccordionContent>  </AccordionItem>  <AccordionItem value="item-2">    <AccordionTrigger>      Is it styled?    </AccordionTrigger>    <AccordionContent>      Yes. It comes with default styles that matches the other components aesthetic.    </AccordionContent>  </AccordionItem>  <AccordionItem value="item-3">    <AccordionTrigger>      Is it animated?    </AccordionTrigger>    <AccordionContent>      Yes. It's animated by default, but you can disable it if you prefer.    </AccordionContent>  </AccordionItem></Accordion>

Installation

pnpm dlx shadcn@latest add @optics/accordion

Props

<Accordion />
Name
Type
collapsible
boolean(default: false)
hiddenUntilFound
boolean
keepMounted
boolean
loopFocus
boolean
onValueChange
(...args) => void
render
React.ReactElement
onOpenChange
(...args) => void
nativeButton
boolean

<AccordionItem />
Name
Type
hiddenUntilFound
boolean
keepMounted
boolean
loopFocus
boolean
onValueChange
(...args) => void
render
React.ReactElement
onOpenChange
(...args) => void
nativeButton
boolean
<AccordionTrigger />
Name
Type
showArrow
boolean(default: true)
hiddenUntilFound
boolean
keepMounted
boolean
loopFocus
boolean
onValueChange
(...args) => void
render
React.ReactElement
onOpenChange
(...args) => void
nativeButton
boolean
<AccordionPanel />
Name
Type
hiddenUntilFound
boolean
keepMounted
boolean
loopFocus
boolean
onValueChange
(...args) => void
render
React.ReactElement
onOpenChange
(...args) => void
nativeButton
boolean
Alert