Accordion

A collapsible for displaying content.

Installation


pnpm dlx shadcn@latest add @shark-ui/accordion

Usage


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


<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>Accordion Item 1</AccordionTrigger>
    <AccordionContent>Accordion Content 1</AccordionContent>
  </AccordionItem>
 
  <AccordionItem value="item-2">
    <AccordionTrigger>Accordion Item 2</AccordionTrigger>
    <AccordionContent>Accordion Content 2</AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Single

By default, only one item can be open at a time. Use the collapsible prop to allow closing the open item.

Multiple

Use the multiple prop to allow multiple items to be open simultaneously.

Controlled

Use the value and onValueChange props to control the accordion state programmatically.

Open item: None

API Reference

Accordion

Root element of the accordion. Renders a div

Prop	Type	Default
`collapsible`	`boolean`	`false`
`multiple`	`boolean`	`false`
`value`	`string[]`	`-`
`defaultValue`	`string[]`	`-`
`onValueChange`	`ValueChangeDetails`	`-`
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`
`className`	`string`	`-`

AccordionItem

Container for a single accordion item. Renders a div

Prop	Type	Default
`value`	`string`	required
`className`	`string`	`-`

AccordionTrigger

Button that toggles the accordion item. Renders a button

Prop	Type	Default
`disabled`	`boolean`	`false`
`className`	`string`	`-`

AccordionContent

Container for the accordion item content. Renders a div

Prop	Type	Default
`className`	`string`	`-`

For a complete list of props, see the Ark UI documentation.

On This Page

Installation Usage Examples Single Multiple Controlled API Reference Accordion AccordionItem AccordionTrigger AccordionContent