UI
Accordion
Accordions represent one or more vertically stacked headings that reveal a section of additional content.
'use client';import { Accordion, AccordionBody, AccordionHeader, AccordionList,} from '@tremor/react';
export const AccordionHero = () => ( <AccordionList> <Accordion> <AccordionHeader className="text-sm font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">Accordion 1</AccordionHeader> <AccordionBody className="leading-6"> 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 className="text-sm font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">Accordion 2</AccordionHeader> <AccordionBody className="leading-6"> 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 className="text-sm font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">Accordion 3</AccordionHeader> <AccordionBody className="leading-6"> 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>);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 { Accordion, AccordionBody, AccordionHeader, AccordionList,} from '@tremor/react';
export function AccordionUsageExample() { return ( <AccordionList className="mx-auto max-w-md"> <Accordion> <AccordionHeader className="text-sm font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">Accordion 1</AccordionHeader> <AccordionBody className="leading-6"> 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 className="text-sm font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">Accordion 2</AccordionHeader> <AccordionBody className="leading-6"> 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 className="text-sm font-medium text-tremor-content-strong dark:text-dark-tremor-content-strong">Accordion 3</AccordionHeader> <AccordionBody className="leading-6"> 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 componentThis component does not have any Tremor-specific properties.
API Reference: Accordion
client component- defaultOpen
- Sets the default state of an accordion to be opened or retracted.
Required
boolean
API Reference: AccordionHeader
This component does not have any Tremor-specific properties.
API Reference: AccordionBody
This component does not have any Tremor-specific properties.
Theming
AccordionList
| Element | Theme Token |
|---|---|
| Roundness borderRadiustremor-default | borderRadiustremor-default |
| Shadow boxShadowtremor-shadow-card | boxShadowtremor-shadow-card |
Accordion
| Element | Theme Token |
|---|---|
| Roundness borderRadiustremor-default | borderRadiustremor-default |
| Background color colorstremor-background-DEFAULT | colorstremor-background-DEFAULT |
| Border color (decoration) colorstremor-border-DEFAULT | colorstremor-border-DEFAULT |
Accordion Header
| Element | Theme Token |
|---|---|
| Font size fontSizetremor-default | fontSizetremor-default |
| Text color colorstremor-content-emphasis | colorstremor-content-emphasis |
| Chevron Down Icon colorstremor-content-subtle | colorstremor-content-subtle |
Accordion Body
| Element | Theme Token |
|---|---|
| Font size fontSizetremor-default | fontSizetremor-default |
| Text color colorstremor-content-DEFAULT | colorstremor-content-DEFAULT |