Types

Accordion

A standard Accordion.

Accordion can be rendered via shorthand prop. It will automatically manage the component state.

Styled

A styled accordion adds basic formatting.

Variations

Fluid

An accordion can take up the width of its container.

Inverted

An accordion can be formatted to appear on dark backgrounds.

Usage

Active Index

The `activeIndex` prop controls which panel is open.

Exclusive

An accordion can have multiple panels open at the same time.

Advanced

Nested Accordions

An accordion can have multiple levels of nested content.

Form Fields

An accordion can be used anywhere where content can be shown or hidden. For example, to show optional form fields.

Accordion Menu

An accordion can be used to create content drawers inside a menu.

Shorthand

Panels of Accordion can be rendered via shorthand prop.

Icon shorthand

An accordion title can have a customizable icon.

This is the bottom
Blazing deployments by Vercel-Logo Vercel.