Neumorphism UI

Accordion

Use Accordion for related sections that readers can scan and expand as needed. Choose Collapsible for one independent section.

Preview

Component setup questions

Explore three questions about style tokens, editable source, and keyboard interaction, with the token answer open initially.

Install the shared base once first. It connects the neumorphic surface, shadow, and radius tokens to your project CSS for components to use.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/accordion

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Place a trigger and content inside each AccordionItem, and give every item a stable, unique value. Set multiple when several answers should stay open together.

"use client";

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

export default function Example() {
  return (
    <Accordion>
      <AccordionItem value="shipping">
        <AccordionTrigger>When will my order arrive?</AccordionTrigger>
        <AccordionContent>Orders ship in 2–3 business days.</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

API Reference

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.

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.