@corvu-next/accordion

Accessible accordion component for SolidJS 2.0 with single/multiple expand modes, controlled and uncontrolled state, and animation support.

Note: This is the Solid 2.0 fork of corvu. It targets [email protected].

Features

• Single or multiple expand modes
• Controlled and uncontrolled state management
• Collapsible — allows closing all items when in single mode
• CSS animation/transition support for expand/collapse
• Full keyboard navigation (Arrow keys, Home, End)
• WAI-ARIA Accordion pattern compliant

Installation

npm install @corvu-next/accordion
# or
pnpm add @corvu-next/accordion

Usage

import Accordion from '@corvu-next/accordion'

function MyAccordion() {
  return (
    <Accordion.Root multiple collapsible>
      <Accordion.Item>
        <Accordion.Trigger>Section 1</Accordion.Trigger>
        <Accordion.Content>
          <p>Content for section 1</p>
        </Accordion.Content>
      </Accordion.Item>
      <Accordion.Item>
        <Accordion.Trigger>Section 2</Accordion.Trigger>
        <Accordion.Content>
          <p>Content for section 2</p>
        </Accordion.Content>
      </Accordion.Item>
    </Accordion.Root>
  )
}

API

| Component | Description | |-----------|-------------| | Accordion.Root | Container. Props: multiple, collapsible, value/onValueChange for controlled mode. | | Accordion.Item | Wraps a single accordion section. Props: value, disabled. | | Accordion.Trigger | Button that toggles the associated content panel. | | Accordion.Content | Collapsible content panel. Supports CSS animations via data-expanded/data-collapsed attributes. |

Further Reading

This package is part of corvu-next, a collection of unstyled, accessible and customizable UI primitives for SolidJS 2.0.