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
Default: { false }
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 |