Sections

Components

Utilities

Forms

Hooks

useIsMobile

Accordion

Copy Markdown

A collapsible for displaying content.

Docs API

PreviewCode

Product Information

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.

Shipping Details

Return Policy

Installation#

CLIManual

pnpmbunnpmyarn

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.

PreviewCode

Product Information

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

Shipping Details

Return Policy

item-1

States#

Disabled#

PreviewCode

Product Information

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

Shipping Details

Return Policy

Examples#

Non-collapsible#

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

PreviewCode

Product Information

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

Shipping Details

Return Policy

Multiple#

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

PreviewCode

Product Information

Shipping Details

Return Policy

Card#

Wrap the Accordion in a Card component.

PreviewCode

Product Information

Common questions about our products, shipping, and returns.

Product Information

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

Shipping Details

Return Policy

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`

AccordionItem#

Single accordion item.

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

AccordionTrigger#

Toggles the item open/closed on click.

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

AccordionContent#

Holds the collapsible content for the item.

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

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

[

Changelog ](/docs/changelog)[

Action Bar ](/docs/components/action-bar)

On This Page

Installation Anatomy Usage Controlled States Disabled Examples Non-collapsible Multiple Card API Reference Accordion AccordionItem AccordionTrigger AccordionContent