accordion

Installation

npx @gentleduck/cli add accordion

npx @gentleduck/cli 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

ChevronDown Icon

multiple

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.