Components
Accordion
A collapsible panel that can be expanded or collapsed.
Loading
Installation
pnpm dlx shadcn@latest add @toui/accordion
Examples
Outline
Loading
Solid
Loading
Indicator
Nested
Loading
Pattern
Tokens
4 CSS variables in 4 categories.
px
| CSS Variable | Value | Description |
|---|---|---|
--accordion-px | var(--component-px-lg) | Horizontal padding for outline/solid variants |
py
| CSS Variable | Value | Description |
|---|---|---|
--accordion-py | 1rem | Vertical padding for trigger (top/bottom) |
gap
| CSS Variable | Value | Description |
|---|---|---|
--accordion-gap | var(--component-gap-md) | Gap between trigger and icon |
radius
| CSS Variable | Value | Description |
|---|---|---|
--accordion-radius | var(--component-radius-md) | Outline/solid item border radius |
API Reference
Accordion
This component is based on the Radix UI Accordion primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
variant | ||
indicator |
AccordionTrigger
This component is based on the Accordion.Trigger primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
indicator |
Credits
- Built with Radix UI Accordion.