Accordion

Composable expandable sections with native keyboard interaction and single or multiple open items.

Does it support keyboard navigation?

Yes. Tab to a question and press Enter or Space to expand or collapse its answer.

Can I customize the design?

Use your own content, theme tokens, and className on each part. The source lives in your project.

Can I open multiple items?

Set multiple on Accordion to keep several answers open at once.

Expandable sections built with native disclosure elements and a composable API. No additional UI dependency is required.

Installation

text

Add the accordion component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/accordion.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

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

<Accordion defaultValue={["details"]}>
  <AccordionItem value="details">
    <AccordionTrigger>How does it work?</AccordionTrigger>
    <AccordionContent>Click the question to toggle this content.</AccordionContent>
  </AccordionItem>
  <AccordionItem value="customize">
    <AccordionTrigger>Can I customize it?</AccordionTrigger>
    <AccordionContent>Style each part with className.</AccordionContent>
  </AccordionItem>
</Accordion>

Props

Prop	Type	Default	Description
`multiple`	`boolean`	`false`	Allow multiple items to stay open.
`defaultValue`	`readonly string[]`	`[]`	Item values expanded initially.
`AccordionItem.value`	`string`	`Required`	Unique value identifying each item.
`children`	`ReactNode`	`—`	Accordion items, triggers, and content.
`className`	`string`	`—`	Additional classes for each part.

Accordion accepts multiple (boolean, defaults to false) and defaultValue (an array of item values, defaults to empty). With multiple disabled, provide at most one default value. Items can always be collapsed. AccordionItem requires a unique string value. Place AccordionTrigger first inside each item, followed by AccordionContent. All parts accept className, children, and native attributes for their elements: div, details, summary, and div respectively. The item manages its own native open state; controlled state is not exposed.

Dependencies

No additional packages required.