Docs
accordion

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 matches the other components' aesthetic.
Is it animated?
Yes. It's animated by default, but you can disable it if you prefer.

Installation

npx duck-ui@latest add accordion
npx duck-ui@latest add accordion

Usage

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

Examples

Default

Is it accessible?
Yes. It adheres to the WAI-ARIA design pattern.
Is it styled?
Yes. It comes with default styles that matches the other components' aesthetic.
Is it animated?
Yes. It's animated by default, but you can disable it if you prefer.

ChevronDown Icon

Paying Methods

Select your preferred payment method

Wallet Options

Choose your digital wallet

multiple

Is it accessible?
Yes. This accordion is built following the WAI-ARIA design patterns to ensure accessibility for users with disabilities. Each trigger is keyboard-navigable, and the content is properly associated with its trigger for screen readers. This makes it usable across a wide range of devices and assistive technologies.
Is it styled?
Yes. The accordion comes with a modern and clean default styling that seamlessly integrates with other UI components in the registry. You can also customize the styles with utility classes or by overriding the default class names, ensuring it matches the aesthetic of your application.
Is it animated?
Yes. By default, the accordion includes smooth and responsive animations for expanding and collapsing content. These animations provide a visually appealing user experience, while also making the state transitions more intuitive. If you prefer, the animations can be disabled or replaced with your own custom effects.
How customizable is it?
The accordion is highly customizable. You can modify its behavior, appearance, and animations through props, custom styles, and utility classes. Whether you need to adjust the spacing, colors, or even change the way it functions, the accordion is designed to be flexible and adaptable to your project's needs.
What are some use cases for this component?
Accordions are versatile and can be used in a variety of scenarios, such as:
  • FAQ sections to organize questions and answers.
  • Collapsible menus or sub-menus in navigation systems.
  • Displaying content-heavy sections in a compact way, such as product details or documentation.
  • Interactive forms where users can expand and fill sections as needed.

API Reference

Accordion

  • type?: 'single' | 'multiple' (default: 'single'): Defines accordion behavior. 'single' allows only one open item; 'multiple' allows multiple open items.
  • defaultValue?: string | string[]: Sets initial open state(s); string for single type, array for multiple.
  • value?: string | string[]: Controlled open state(s); requires onValueChange for updates.
  • onValueChange?: (value: string | string[]) => void: Callback fired when open state changes.
  • collapsible?: boolean (default: true, single type only): Allows collapsing the currently open item by clicking again.
  • rerender?: boolean (default: false): Forces internal re-render on each toggle, enabling conditional remount with renderOnce.
  • ...props?: React.HTMLProps<HTMLDivElement>: Other native <div> props.

AccordionItem Props

  • value: string: Unique identifier tying trigger to content.
  • renderOnce?: boolean (default: false): Mounts content only on first expand and preserves it.
  • children: [trigger: ReactNode, content: ReactNode]: Two nodes: first the AccordionTrigger, second the AccordionContent.
  • ...props?: React.HTMLProps<HTMLDetailsElement>: Other native <details> props.

AccordionTrigger Props

  • value?: string: Identifier matching parent item’s value.
  • icon?: ReactNode: Custom icon component; defaults to a rotating ChevronDown.
  • ...props?: React.HTMLProps<HTMLElement>: Other native <summary> props.

AccordionContent Props

  • rerender?: boolean (default: false): Controls remount behavior based on parent context.
  • ...props?: React.HTMLProps<HTMLDivElement>: Other native <div> props.
Gentleduck TtestAlert