Skip to main content
ninna-ui
On this page

Accordion

Vertically stacked collapsible content sections.

import { Accordion } from "@ninna-ui/navigation";

pnpm add @ninna-ui/navigation@latest
Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the Accordion component in your application.

import { Accordion } from "@ninna-ui/navigation";


export default function Example() {
  return (
    <Accordion type="single" collapsible>
      <Accordion.Item value="item-1">
        <Accordion.Trigger>Question 1</Accordion.Trigger>
        <Accordion.Content>Answer 1</Accordion.Content>
      </Accordion.Item>
      <Accordion.Item value="item-2">
        <Accordion.Trigger>Question 2</Accordion.Trigger>
        <Accordion.Content>Answer 2</Accordion.Content>
      </Accordion.Item>
    </Accordion>
  );
}

Basic

A collapsible accordion with single-open behavior.

Live preview

Variants

Accordion supports outline, soft, and ghost visual styles.

Live preview

outline

soft

ghost

Multiple Open

Allow multiple items to be expanded simultaneously.

Live preview

Disabled

Individual accordion items can be disabled.

Live preview

API Reference

Complete list of props for the Accordion component and its sub-components.

Accordion (Root)

PropTypeDefaultDescription
type*'single' | 'multiple'—Whether one or many items can be open at once
variant'outline' | 'soft' | 'ghost''outline'Visual style variant
valuestring | string[]—Controlled open item(s)
defaultValuestring | string[]—Default open item(s) (uncontrolled)
onValueChange(value: string | string[]) => void—Callback when open items change
collapsiblebooleanfalseAllow all items to close (single mode only)
classNamestring—Additional CSS classes

Accordion.Item

PropTypeDefaultDescription
value*string—Unique value for this item
disabledbooleanfalseWhether the item is disabled

Accordion.Content

PropTypeDefaultDescription
forceMounttrue—Whether to force mount the content (keeps DOM alive)

Accessibility

  • Follows the WAI-ARIA Accordion pattern
  • Arrow keys navigate between triggers
  • Home and End keys jump to first/last trigger
  • Enter/Space toggles the focused item
  • Disabled items are skipped during keyboard navigation
  • Triggers use aria-expanded and aria-controls