Neumorphism UI
Navigation & disclosure@neumorphism-ui/accordion

Accordion

Preserves Base UI Accordion state management and accessibility relationships while rendering open items as inset surfaces. Supports both multiple selection and controlled or uncontrolled usage.

@neumorphism-ui/accordion
Registry JSON

Preview

Adding the first component also connects the neumorphic surface, shadow, and radius tokens to your project CSS.

Installation

Installation: accordionnpx shadcn@latest add @neumorphism-ui/accordion

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

Accordion import code
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

Example

Accordion usage code
<Accordion defaultValue={["shipping"]}>
  <AccordionItem value="shipping">
    <AccordionTrigger>How long does shipping take?</AccordionTrigger>
    <AccordionContent>
      Orders ship within 2–3 business days.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="returns">
    <AccordionTrigger>Can I return my order?</AccordionTrigger>
    <AccordionContent>
      You can request a return within 14 days of delivery.
    </AccordionContent>
  </AccordionItem>
</Accordion>

API Reference

ComponentPropTypeDefaultDescription
AccordionmultiplebooleanfalseAllows multiple items to remain open at the same time.
Accordionvalue / defaultValuestring[]—The controlled value or initial uncontrolled value of the open items.
AccordiononValueChange(value) => void—Called when the set of open items changes.
AccordionItemvaluerequiredstring—A unique value that identifies the item.
AccordionItemdisabledbooleanfalseDisables the item trigger.
AccordionContentkeepMountedbooleanfalseKeeps the panel in the DOM while it is closed.

Accessibility

  • 01

    Base UI manages the aria-expanded and aria-controls relationships between each trigger and panel.

  • 02

    Move focus to a trigger with Tab, then press Enter or Space to open or close the item.

  • 03

    AccordionTrigger renders a real button, so do not place another button inside its heading.