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.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@/registry/optics/accordion";<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>	<AccordionItem value="item-2">		<AccordionTrigger>Is it styled?</AccordionTrigger>		<AccordionContent>			Yes. It comes with default styles that matches the other components aesthetic.		</AccordionContent>	</AccordionItem></Accordion>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/accordion.json

Props

<Accordion />
Name
Type
type
"single" | "multiple"
value
string | string[]
defaultValue
string | string[]
onValueChange
(value: string | string[]) => void
collapsible
boolean
disabled
boolean
dir
"ltr" | "rtl"
orientation
"horizontal" | "vertical"
className
string

<AccordionItem />
Name
Type
value
string (required)
className
string
<AccordionTrigger />
Name
Type
className
string
showArrow
boolean (default: true)
disabled
boolean
<AccordionContent />
Name
Type
className
string
keepRendered
boolean (default: false)
transition
object
Alert