Accordion
A flexible component that organizes content into collapsible sections, improving space efficiency. Supports multiple styling variants, customizable icons, and various positioning options.
Installation
Install the following dependencies
Run these commands in your terminal to install the required packages
Create or update your Accordion component
Copy this code to create your Accordion component
Test Your Component
- 1. Add the component to a test page
- 2. Check all props and variants work as expected
- 3. Verify responsive behavior
- 4. Test with different content/data
- 5. Ensure accessibility features work correctly
With variants: ghost
Clean style without background, borders, or padding
With variants: unstyled
Has padding but removes background and borders for a cleaner appearance
With icons
Accordion with icons to enhance visual context
Left arrow
Position the expand/collapse indicator on the left side
Left arrow with icons
Place the expand/collapse indicator at the beginning, followed by an icon and text
FAQ style example
Common FAQ layout with icons and indented content
Custom icon styling
Customize icon size and color
Custom arrow icons
Change the default plus/minus icons to custom arrows
API Reference
Built on Radix UI Accordion with additional styling options. Tables below show only our extended props beyond the base implementation.
Accordion.Root
See Radix UI docs for base props. Only extended props shown below.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default""ghost""unstyled" | "default" | Visual style variant of the accordion |
Accordion.Item
See Radix UI docs for base props. Only extended props shown below.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default""ghost""unstyled" | "from Root" | Override the variant from Root |
Accordion.Trigger
See Radix UI docs for base props. Only extended props shown below.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default""ghost""unstyled" | "from Root" | Override the variant from Root |
Accordion.Content
See Radix UI docs for base props. Only extended props shown below.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default""ghost""unstyled" | "from Root" | Override the variant from Root |
Accordion.Arrow
Custom component that displays an arrow indicator that rotates based on the accordion state.
| Prop | Type | Default | Description |
|---|---|---|---|
position | "left""right" | "right" | Position of the arrow indicator |
openIcon | "ReactNode" | "undefined" | Custom icon for open state |
closeIcon | "ReactNode" | "undefined" | Custom icon for closed state |
variant | "default""ghost""unstyled" | "from Root" | Override the variant from Root |
Accordion.Icon
Custom component for displaying an icon within the accordion trigger.
| Prop | Type | Default | Description |
|---|---|---|---|
as | "ReactNode" | "undefined" | Icon component to render |
color | "string" | "undefined" | CSS class for icon color |
size | "string" | "size-5" | CSS class for icon size |
variant | "default""ghost""unstyled" | "from Root" | Override the variant from Root |