Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Accordion

The Accordion component lets users show and hide sections of related content on a page.

code

Expend code


    <Accordion>
      <AccordionItem value="item-1">
        <AccordionSummary>Accordion 1</AccordionSummary>
        <AccordionDetails>Content for Accordion 1</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionSummary>Accordion 2</AccordionSummary>
        <AccordionDetails>Content for Accordion 2</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionSummary>Accordion 3</AccordionSummary>
        <AccordionDetails>Content for Accordion 3</AccordionDetails>
      </AccordionItem>
    </Accordion>


    <Accordion>
      <AccordionItem value="item-1">
        <AccordionSummary>Accordion 1</AccordionSummary>
        <AccordionDetails>Content for Accordion 1</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionSummary>Accordion 2</AccordionSummary>
        <AccordionDetails>Content for Accordion 2</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionSummary>Accordion 3</AccordionSummary>
        <AccordionDetails>Content for Accordion 3</AccordionDetails>
      </AccordionItem>
    </Accordion>

#ExpandIcons

code

Expend code


    <Accordion>
      <AccordionItem value="item-1">
        <AccordionSummary>Accordion 1</AccordionSummary>
        <AccordionDetails>Content for Accordion 1</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionSummary expandIcon={<Triangle className="text-red-500 " />}>Error</AccordionSummary>
        <AccordionDetails>Content for Error</AccordionDetails>
      </AccordionItem>
    </Accordion>


    <Accordion>
      <AccordionItem value="item-1">
        <AccordionSummary>Accordion 1</AccordionSummary>
        <AccordionDetails>Content for Accordion 1</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionSummary expandIcon={<Triangle className="text-red-500 " />}>Error</AccordionSummary>
        <AccordionDetails>Content for Error</AccordionDetails>
      </AccordionItem>
    </Accordion>

#SingleOpen

code

Expend code


    <Accordion singleOpen>
      <AccordionItem value="item-1">
        <AccordionSummary expandIcon={<Triangle className="text-red-500 " />}>Accordion 1</AccordionSummary>
        <AccordionDetails>Content for Accordion 1</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionSummary>Accordion 2</AccordionSummary>
        <AccordionDetails>Content for Accordion 2</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionSummary expandIcon={<Triangle className="text-green-500" />}>Accordion 3</AccordionSummary>
        <AccordionDetails>Content for Accordion 3</AccordionDetails>
      </AccordionItem>
    </Accordion>


    <Accordion singleOpen>
      <AccordionItem value="item-1">
        <AccordionSummary expandIcon={<Triangle className="text-red-500 " />}>Accordion 1</AccordionSummary>
        <AccordionDetails>Content for Accordion 1</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionSummary>Accordion 2</AccordionSummary>
        <AccordionDetails>Content for Accordion 2</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionSummary expandIcon={<Triangle className="text-green-500" />}>Accordion 3</AccordionSummary>
        <AccordionDetails>Content for Accordion 3</AccordionDetails>
      </AccordionItem>
    </Accordion>

#DefaultExpanded & Disable

code

Expend code


    <Accordion>
      <AccordionItem value="item-1">
        <AccordionSummary expandIcon={<Triangle className="text-red-500 " />}>Accordion 1</AccordionSummary>
        <AccordionDetails>Content for Accordion 1</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-2" defaultExpanded>
        <AccordionSummary>Accordion 2</AccordionSummary>
        <AccordionDetails>Content for Accordion 2</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-3" disable>
        <AccordionSummary expandIcon={<Triangle className="text-green-500" />}>Accordion 3</AccordionSummary>
        <AccordionDetails>Content for Accordion 3</AccordionDetails>
      </AccordionItem>
    </Accordion>


    <Accordion>
      <AccordionItem value="item-1">
        <AccordionSummary expandIcon={<Triangle className="text-red-500 " />}>Accordion 1</AccordionSummary>
        <AccordionDetails>Content for Accordion 1</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-2" defaultExpanded>
        <AccordionSummary>Accordion 2</AccordionSummary>
        <AccordionDetails>Content for Accordion 2</AccordionDetails>
      </AccordionItem>
      <AccordionItem value="item-3" disable>
        <AccordionSummary expandIcon={<Triangle className="text-green-500" />}>Accordion 3</AccordionSummary>
        <AccordionDetails>Content for Accordion 3</AccordionDetails>
      </AccordionItem>
    </Accordion>

Accordion

the properties of the accordion component that allows you to show or hide related content sections on the page.

Prop	Type	Default	Description
children	React.ReactNode	-	Includes the AccordionItem component as a child element.
className	string	-	CSS class for additional styling.
singleOpen	boolean	false	Sets that only a single accordion item can be opened.

AccordionItem

the properties of the components that make up the individual items inside the accordion

Prop	Type	Default	Description
value	string	-	A unique value to identify each accordion item.
children	React.ReactNode	-	Includes the AccordionSummary and AccordionDetails components as child elements.
isOpen	boolean	false	Indicates whether the item is open.
onToggle	() => void	-	This function toggles the opening or closing of an item.
defaultExpanded	boolean	false	Sets whether the component will be expanded by default.
disable	boolean	false	Sets whether the item is inactive.

AccordionSummary

the properties of the component, including the title and expansion icon of the accordion item.

Prop	Type	Default	Description
children	React.ReactNode	-	Contains content to display the title or summary of the accordion item.
isOpen	boolean	false	Indicates whether the accordion item is open.
onToggle	() => void	-	A function toggles the open or closed status of an accordion item.
expandIcon	ReactNode	<ChevronDown />	Specifies the expansion icon to be displayed in the accordion summary section.

AccordionDetails

the properties of the component that display the details of the accordion item.

Prop	Type	Default	Description
children	React.ReactNode	-	Contains details of the accordion item.
isOpen	boolean	false	Indicates whether the accordion item is open.