Component

Accordion

A disclosure primitive for progressive settings, FAQs, and compact help.

Preview

Use the token sheet to keep color, radius, spacing, and motion consistent across app surfaces.

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Accordion } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/accordion.json

Copied source import

code

import "@/styles/axie.css";import { Accordion } from "@/components/axie/accordion";

Prefer @axie/accordion? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Accordion } from "axie-ui";export function Example() {  return (    <Accordion      items={[        { title: "Tokens", value: "tokens", content: "Use shared Axie tokens." }      ]}    />  );}

Accessibility

Use a real button for each trigger and keep the trigger text specific.
Expose expanded state with `aria-expanded` when the primitive is made fully controlled.
Keep panel content in DOM order immediately after its trigger.

API Reference

Prop	Type	Default	Description
type	single \| multiple	single	Allows one open item or multiple open items.
items	AccordionItem[]	-	Accordion item definitions.
value	string \| string[]	-	Controlled open value.
onValueChange	(value: string \| string[]) => void	-	Called when the open value changes.