Components
Accordion
A vertically stacked set of interactive headings that reveal associated content panels.
Installation
Anatomy
Import the components and piece them together.
import {
AccordionRoot,
AccordionItem,
AccordionTrigger,
AccordionContent
} from "@/components/accordion";
export default () => (
<AccordionRoot>
<AccordionItem>
<AccordionTrigger />
<AccordionContent />
</AccordionItem>
</AccordionRoot>
);API Reference
AccordionRoot
The root container for the accordion.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'style_one', 'style_two', 'style_three', 'style_four', 'style_five' | 'style_one' | Visual style variant for the accordion |
className | string | - | Additional CSS classes |
children | React.ReactNode | - | Accordion items |
AccordionItem
An individual accordion item containing a trigger and content.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes |
children | React.ReactNode | Trigger and content components |
AccordionTrigger
The button that toggles the accordion content.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes |
children | React.ReactNode | Trigger content (typically text) |
AccordionContent
The collapsible content area.
| Prop | Type | Description |
|---|---|---|
className | string | Additional CSS classes |
children | React.ReactNode | Content to display when expanded |
Variants
The component comes with five pre-styled variants:
- style_one: Bordered items with rounded corners
- style_two: Bottom-bordered items
- style_three: Neutral background with rounded corners
- style_four: Light background with chevron icon
- style_five: Light background with compact spacing
<AccordionRoot variant="style_four">{/* items */}</AccordionRoot>Accessibility
- Uses semantic HTML with proper heading hierarchy (
h3elements) - Implements ARIA attributes (
aria-controls,aria-expanded,aria-labelledby) - Keyboard accessible with proper focus management
- Content is properly associated with triggers via
role="region"