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.
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.
Status Badge
Semantic wrapper over Badge that maps admin status names to visual variants with a colored indicator dot and optional pulse animation — copy it into your project and own it completely.
Action Row
One tappable list row with a leading icon, a title, an optional second line and a trailing value or caret. Built with CSS Modules — copy it into your project and own it completely.