1. Components
  2. Accordion

Components

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.

import { AccordionList, Accordion, AccordionHeader, AccordionBody } from "@tremor/react";

export default () => (
  <AccordionList className="max-w-md mx-auto">
    <Accordion>
      <AccordionHeader>Accordion 1</AccordionHeader>
      <AccordionBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est
        congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.
      </AccordionBody>
    </Accordion>
    <Accordion>
      <AccordionHeader>Accordion 2</AccordionHeader>
      <AccordionBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est
        congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.
      </AccordionBody>
    </Accordion>
    <Accordion>
      <AccordionHeader>Accordion 3</AccordionHeader>
      <AccordionBody>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est
        congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.
      </AccordionBody>
    </Accordion>
  </AccordionList>
);

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

API Reference: AccordionList

client component

This component does not have any Tremor-specific properties.

API Reference: Accordion

client component

defaultOpen
Description
Sets the default state of an accordion to be opened or retracted.
Type
boolean
Default
{ false }
Values
true, false

API Reference: AccordionHeader

This component does not have any Tremor-specific properties.

API Reference: AccordionBody

This component does not have any Tremor-specific properties.

Need help? You can also ask the community on GitHub Discussions or Slack.