Anatomy

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Trigger />
    <Accordion.Content />
  </Accordion.Item>
</Accordion.Root>

Usage

import { Accordion } from '@ivaldi/ui'

<Accordion.Root type="single" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>Section 1</Accordion.Trigger>
    <Accordion.Content>
      <p>Content for section 1</p>
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>Section 2</Accordion.Trigger>
    <Accordion.Content>
      <p>Content for section 2</p>
    </Accordion.Content>  
  </Accordion.Item>
</Accordion.Root>

Accordion.Root Props

Root component for the Accordion UI element. Provides the container for accordion items, managing their state and interactions.

Accordion.Content Props

Content component for an Accordion item. Renders the collapsible content section with smooth animations for expand/collapse transitions.

Accordion.Item Props

Individual item component within an Accordion. Represents a collapsible section that contains a trigger and content.

Accordion.Trigger Props

Trigger component for an Accordion item. Renders a button that controls the expansion/collapse of the associated content. Includes an animated chevron icon that rotates based on the open state.