ComponentsData Display
Accordion
Vertically stacked collapsible sections. Built on Radix UI with single or multiple expansion modes.
Single Mode
Only one item can be open at a time. With collapsible, clicking the open item closes it.
Multiple Mode
Multiple items can be expanded simultaneously.
CSS custom properties distributed via npm. Themes update automatically.
Copied into your project with full edit rights.
Disabled Item
Individual items can be disabled to prevent expansion.
Installation
npx visor add accordionThis copies two files into your project:
components/ui/accordion/accordion.tsx— the componentcomponents/ui/accordion/accordion.module.css— the styles
Usage
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion/accordion';
export default function Example() {
return (
<Accordion type="single" collapsible>
<AccordionItem value="item-1">
<AccordionTrigger>Section One</AccordionTrigger>
<AccordionContent>Content for section one.</AccordionContent>
</AccordionItem>
</Accordion>
);
}API Reference
AccordionProps
| Prop | Type | Default | Description |
|---|---|---|---|
type* | 'single' | 'multiple' | — | Whether one or multiple items can be expanded at once. |
collapsible | boolean | false | When type is "single", allows closing the open item. |
value | string | string[] | — | Controlled expanded item value(s). |
defaultValue | string | string[] | — | Default expanded item value(s) for uncontrolled usage. |
The component also accepts all standard <div> HTML attributes.
Sub-components
| Component | Element | Purpose |
|---|---|---|
Accordion | <div> | Root container. Requires type prop. |
AccordionItem | <div> | Individual collapsible section. Requires value prop. |
AccordionTrigger | <button> | Toggle button with animated caret icon. |
AccordionContent | <div> | Animated content area. |
Accessibility
- Built on Radix UI
Accordionprimitive — fully keyboard accessible. - Uses
role="button"on triggers witharia-expandedstate management. ArrowDown/ArrowUpnavigate between triggers;EnterorSpacetoggles.- Disabled items receive
aria-disabled="true"and are skipped in keyboard navigation. - Content regions use
role="region"linked to their trigger viaaria-labelledby.