accordion

Installation

npx duck-ui@latest add accordion

npx duck-ui@latest add accordion

Usage

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

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } 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

The Accordion component provides a collapsible container for managing AccordionItem components.

Accordion Properties

• type ('single' | 'multiple', optional):

  • Defines the type of accordion:
    • 'single': Only one item can be open at a time.
    • 'multiple': Allows multiple items to be open simultaneously.
  • Defaults to 'single'.

• defaultValue (string | string[], optional):

  • Sets the initial open state(s) of the accordion items.
  • Use a string for single-item accordion or an array for multi-item accordion.

• value (string | string[], optional):

  • Controls the open state(s) of the accordion items.
  • Works in controlled mode alongside onValueChange.

• onValueChange ((value: string | string[]) => void, optional):

  • Callback fired when the open state changes.

AccordionItem

A single collapsible item within the accordion.

AccordionItem Properties

• value (string, required): A unique identifier for the accordion item.

• className (string, optional): Additional CSS classes for custom styling.

• children (React.ReactNode): Content of the accordion item.

AccordionTrigger

The component that toggles the open/close state of an AccordionItem.

AccordionTrigger Properties

• icon (IconType, optional): Custom icon displayed alongside the trigger text, if not provided, a default ChevronDown icon is used.

• className (string, optional): Additional CSS classes for custom styling.

• children (React.ReactNode): Content inside the trigger.

AccordionContent

The collapsible content displayed when an AccordionItem is open.

AccordionContent Properties

• className (string, optional): Additional CSS classes for custom styling.

• children (React.ReactNode): Content inside the collapsible area.

Type Definitions

IconType

Defines the properties for an icon component.

• children (React.ElementType): The icon component (e.g., a Lucide or custom SVG icon).

• Additional SVG Props: Supports all React.SVGProps for further customization.