1. Components
  2. Accordion

Components

Accordion

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.

   

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.

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

shadow
Description
Set a shadow for the accordion list.
Type
boolean
Default
true
Values
true, false
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

API Reference: Accordion

shadowoptional
Description
Set a shadow for the accordion.
Type
boolean
Default
{ true }
Values
true, false
expanded
Description
Sets the default state of an accordion to be expanded or retracted.
Type
boolean
Default
{ false }
Values
true, false
marginTopoptional
Description
Controls the top margin.
Type
string
Default
mt-0

API Reference: AccordionHeader

This component does not have any public properties.

API Reference: AccordionBody

This component does not have any public properties.