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 whenAccordionHeader
is clicked.AccordionList
: An optional component to wrap severalAccordion
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
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
API Reference: AccordionHeader
This component does not have any public properties.
API Reference: AccordionBody
This component does not have any public properties.