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>
);

API Reference: AccordionList

client component

This component does not have any Tremor-specific properties.

API Reference: Accordion

client component

API Reference: AccordionHeader

This component does not have any Tremor-specific properties.

API Reference: AccordionBody

This component does not have any Tremor-specific properties.