Accordion

A collapsible for displaying content.

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.

Installation


pnpm dlx shadcn@latest add @shark/accordion

Anatomy


Accordion
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

Usage


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


<Accordion>
  <AccordionItem value="item-1">
    <AccordionTrigger>
      Is it accessible?
    </AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Controlled

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

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

item-1

States

Disabled

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

Examples

Non-collapsible

Set the collapsible prop to false to disable the collapsible behavior.

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

Multiple

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

Card

Wrap the Accordion in a Card component.

Product Information

Common questions about our products, shipping, and returns.

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.

API Reference

Accordion

Root component.

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