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 https://shark.vini.one/r/accordion.json

Usage


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


<Accordion>
  <AccordionItem>
    <AccordionTrigger />
    <AccordionContent />
  </AccordionItem>
  <AccordionItem>
    <AccordionTrigger />
    <AccordionContent />
  </AccordionItem>
</Accordion>

Controlled

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

Open the 2nd item

❌

Examples

Non-collapsible

Set the collapsible prop to false to disable the collapsible behavior and prevent closing the open item.

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.

Disabled

Use the disabled prop on AccordionItem to prevent interaction with specific items.

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. Manages expand/collapse state for items.

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