Accordion

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

When To Use

Use accordions to vertically stack sections of content that can be expanded or collapsed to reveal more information. They're useful for:

Organizing content into logical sections
Conserving vertical space by hiding content until needed
Creating FAQ sections
Simplifying complex forms or interfaces

Examples

Basic#

Multiple#

Custom Styling#

Props

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Components Overview

Welcome to the component library! Below you'll find all available UI components organized by category to help you quickly find what you need.

Alert

Displays a callout for user attention.