Accordion

Preview

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

pnpm exec ui add accordion

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@nimjs/ui';

export function Example() {
  return (
    <Accordion type="single" defaultValue="billing">
      <AccordionItem value="billing">
        <AccordionTrigger>Billing</AccordionTrigger>
        <AccordionContent>Manage payment methods.</AccordionContent>
      </AccordionItem>
      <AccordionItem value="team">
        <AccordionTrigger>Team</AccordionTrigger>
        <AccordionContent>Manage members.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

System metadata

API and states

type="single" allows one open item; type="multiple" allows several. Use value and onValueChange for controlled state, or defaultValue for uncontrolled state. AccordionItem supports disabled.

Accessibility

Each item uses native details and summary elements, which provide keyboard activation and expanded state. Disabled triggers are removed from Tab order.