A collapsible content panel that organizes information into expandable sections.

Import#

import { Accordion } from "asheeui";

Usage#

import { Accordion } from "asheeui";

export default function Basic() {
	const items = [
		{ id: "1", title: "Section 1", content: "Content for section 1" },
		{ id: "2", title: "Section 2", content: "Content for section 2" },
	];

	return <Accordion items={items} />;
}

Examples#

Variant#

Size#

Radius#

Allow multiple open#

Controlled#

With icons#

Custom expand icon#

Disabled item#

Without animation#

Props#

* Falls back through Global Configuration if not set. See below.

AccordionItem#

Global Configuration#

Accordion reads defaults from four places, in this order of precedence:

1. Instance prop: set directly on <Accordion />
2. Component config: components.accordion in your ashee.config
3. Theme default: defaultVariant / defaultRadius in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    accordion: {
      variant: "bordered",
      size: "md",
      radius: "md",
      allowMultiple: false,
    },
  },
};

Built-in fallbacks#

{
  size: "md",
  variant: "separated",
  radius: "md",
  allowMultiple: false,
}

Accessibility#

• Renders a native <button> element for each header with proper type="button"
• Uses aria-expanded and aria-controls to indicate state and associate headers with content panels
• disabled items set disabled attribute on the trigger button
• Implements focus-visible ring for keyboard navigation
• Uses pointer-events-none on closed content panels to prevent focus trapping
• Active item state exposed via data-state="open"/"closed" on content panels

Notes#

• Item IDs: Each item should have a unique id. If not provided, it will use the array index, which may cause issues with reordering.
• Controlled vs Uncontrolled: Use value/onValueChange for controlled usage, or defaultValue for uncontrolled.
• Animation: Uses CSS Grid for smooth height transitions. Can be disabled with disableAnimation.
• Radius Application: ghost and flush variants don't apply radius to the container, while separated and ghost apply radius to individual items. This is by design for visual consistency.