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

Anatomy

How the basic component is pieced together displaying all properties with their default values.

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

export default () => (
  <AccordionList //The AccordionList is optional
    shadow={true}
    marginTop="mt-0"
  >
    <Accordion
      expanded={false}
      shadow={true}
      marginTop="mt-0">
      <AccordionHeader></AccordionHeader>
      <AccordionBody></AccordionBody>
    </Accordion>
  </AccordionList>
);

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

API Reference: Accordion

API Reference: AccordionHeader

This component does not have any public properties.

API Reference: AccordionBody

This component does not have any public properties.