Accordion

Layout

A vertically stacked set of interactive headings that each reveal an associated section of content.

Loading component...

Run the following command to add this component to your project:

$pnpm dlx static-ui add accordion

Import the component directly from the package:

import { Accordion } from "@static-ui/ui"

Common props available for this component:

Prop	Type	Description
type	"single" \| "multiple"	Determines whether one or multiple items can be open at once.
defaultValue	string \| string[]	The initially open accordion item value(s).
collapsible	boolean	Allow all items to be closed when type is single.
className	string	Additional CSS classes to apply.

Uses WAI-ARIA Accordion pattern. Each panel is controlled by its triggering button via `aria-expanded` and `aria-controls` attributes.

Aspect RatioContent-sized to a desired ratio.

CardBounded content container.

CarouselHorizontally scrolling item sets.

CollapsibleExpandable content sections.

Scroll AreaCustom styled scroll container.

SeparatorVisual content divider.

TabsTabbed content panels.