UI

Accordion

Accordions represent one or more vertically stacked headings that reveal a section of additional content.

Import Accordion

Tremor exports three accordion components to create an accordion and one extra component to create a list of accordions:

  • Accordion: Parent element to declare the composition of an accordion.
  • AccordionHeader: Child element to define the header of an accordion element.
  • AccordionBody: Child element containing the content that is revealed when AccordionHeader is clicked.
  • AccordionList: An optional component to wrap several Accordion components into a list of accordions.
import {  Accordion,  AccordionHeader,  AccordionBody,  AccordionList,} from '@tremor/react';

Usage example

The example below shows a composition of a stacked Accordion using AccordionList in combination with several Accordion components.

API Reference: AccordionList

client component

This component does not have any Tremor-specific properties.

API Reference: Accordion

client component
defaultOpen
Required
boolean

Default: { false }

Sets the default state of an accordion to be opened or retracted.

API Reference: AccordionHeader

This component does not have any Tremor-specific properties.

API Reference: AccordionBody

This component does not have any Tremor-specific properties.

Theming

AccordionList

Roundness
borderRadiustremor-default
Shadow
boxShadowtremor-shadow-card

Accordion

Roundness
borderRadiustremor-default
Background color
colorstremor-background-DEFAULT
Border color (decoration)
colorstremor-border-DEFAULT

Accordion Header

Font size
fontSizetremor-default
Text color
colorstremor-content-emphasis
Chevron Down Icon
colorstremor-content-subtle

Accordion Body

Font size
fontSizetremor-default
Text color
colorstremor-content-DEFAULT