111k

Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it styled?
Yes. It comes with default styles that match the other components.
Is it animated?
Yes. It is animated by default, and you can adjust the treatment if needed.
// Preview source for accordion-demo is not available yet.

Installation

>_
pnpm dlx shadcn@latest add accordion

Usage

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
</Accordion>

Examples

Basic

A basic accordion that shows one item at a time. The first item is open by default.

Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it styled?
Yes. It comes with default styles that match the other components.
Is it animated?
Yes. It is animated by default, and you can adjust the treatment if needed.
// Preview source for accordion-basic is not available yet.

Multiple

Use type="multiple" to allow multiple items to be open at the same time.

Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it styled?
Yes. It comes with default styles that match the other components.
Is it animated?
Yes. It is animated by default, and you can adjust the treatment if needed.
What are your shipping options?
We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.
// Preview source for accordion-multiple is not available yet.

Disabled

Use the disabled prop on AccordionItem to disable individual items.

Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it styled?
Yes. It comes with default styles that match the other components.
Is it animated?
Yes. It is animated by default, and you can adjust the treatment if needed.
// Preview source for accordion-disabled is not available yet.

Borders

Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.

Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it styled?
Yes. It comes with default styles that match the other components.
Is it animated?
Yes. It is animated by default, and you can adjust the treatment if needed.
// Preview source for accordion-borders is not available yet.

Card

Wrap the Accordion in a Card component.

Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it styled?
Yes. It comes with default styles that match the other components.
Is it animated?
Yes. It is animated by default, and you can adjust the treatment if needed.
// Preview source for accordion-card is not available yet.

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

What are your shipping options?
We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.
What is your return policy?
Returns are accepted within 30 days if the item is unused and in its original packaging.
How can I contact customer support?
You can reach support from the account dashboard or email support@example.com.
// Preview source for accordion-rtl is not available yet.

API Reference

See the Radix UI documentation for more information.