Accordion

Accordion organizes related information into sections that can be opened and closed. Each trigger controls one content panel.

Use it when a page needs to show several optional details without displaying everything at once. Keep important information visible outside the accordion when users should not have to discover it.

Installation

pnpm dlx shadcn@latest add http://ui.argv-tech.dev/r/accordion.json

Usage

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

<Accordion defaultValue={["status"]}>
    <AccordionItem value="status">
        <AccordionTrigger>Deployment status</AccordionTrigger>
        <AccordionContent>The release is live.</AccordionContent>
    </AccordionItem>
</Accordion>

Composition

Accordion
└── AccordionItem
    ├── AccordionTrigger
    └── AccordionContent

Accordion owns the open state for the entire group. Use defaultValue for an uncontrolled accordion, or combine value with onValueChange when the parent needs to control it.

Every AccordionItem needs a stable, unique value. Place one AccordionTrigger and one AccordionContent inside each item so the heading and panel stay correctly associated.

Enable multiple when more than one panel may remain open. The root also forwards Base UI props such as disabled.

API Reference

Accordion

AccordionItem

AccordionTrigger

Renders the interactive heading for an item and forwards Base UI trigger props.

AccordionContent

Renders the item panel and forwards Base UI panel props.

Accessibility

The primitive provides the trigger and panel relationship, expanded state, and focus behavior. Keyboard users can focus a trigger with Tab and toggle it with Enter or Space.

Write triggers as short questions or labels that describe the hidden content. Avoid vague labels such as “More.”