1

AccordionNew

A vertically stacked set of interactive headings that each reveal a section of content. Supports single/multiple expand modes, controlled and uncontrolled state, and a signature grid-rows unfold animation with y-settle.

Dependencies

motion

Interaction Type

Click a trigger to expand/collapse its panel. Keyboard: Enter or Space to toggle, Tab to move between triggers.

Props

Options you can pass to customize this component.

Prop
Type
Description
type*
'single' | 'multiple'

Whether one or multiple items can be expanded at the same time.

collapsible
boolean

When type is "single", allows closing all items. Has no effect in "multiple" mode.

value
string | string[]

Controlled expanded value(s).

defaultValue
string | string[]

Initial expanded value(s) for uncontrolled usage.

onValueChange
(value: string | string[]) => void

Called when the expanded state changes.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/accordion.json

How to use

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

export function Demo() {
  return (
    <Accordion type="single" collapsible defaultValue="item-1">
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. Full WAI-ARIA accordion pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          Yes. Grid-rows transition with reduced-motion support.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.

Yes. It adheres to the WAI-ARIA design pattern with proper aria-expanded, aria-controls, and role="region" attributes.

Yes. It uses a grid-rows transition with a subtle y-settle for a polished unfold effect. Respects prefers-reduced-motion.

Yes. Pass value and onValueChange for full controlled state, or use defaultValue for uncontrolled.
npx shadcn@latest addhttps://ui.nexvyn.dev/r/accordion.json