Accordion

This component can be used to expand and collapse sections of content, making it easier to navigate and manage large amounts of information.

Properties

Name
Default
Description
title
The title of the accordion item.
content
The content of the accordion item. This can include HTML strings.
open
false
A bindable boolean indicating whether the accordion item is open or closed.
icon
An icon component to display alongside the title.

Example

<Accordion title="What is Accordion?" icon={IconLayers}>
   Accordion is a UI component that allows users to expand and collapse sections of content, making
   it easier to navigate and manage large amounts of information.
</Accordion>
Accordion is a UI component that allows users to expand and collapse sections of content, making it easier to navigate and manage large amounts of information.

Custom Colors

The Accordion component allows you to customize its appearance by changing various color properties such as headerColor, textColor, openedColor, borderColor, and topBorderColor.

Name
Default
Description
headerColor
none
Sets the background color of the accordion header.
textColor
var(--text)
Sets the text color of the accordion title and content.
openedColor
var(--hover)
Sets the background color of the accordion header when it is opened.
borderColor
var(--border)
Sets the border color of the accordion.
topBorderColor
var(--border)
Sets the top border color of the accordion.

Example

<Accordion
 title="Custom Colors"
 icon={IconLayers}
 headerColor="#d5d5fd"
 textColor="#fffff"
 openedColor="#cacaf1"
 borderColor="#fbf3ff"
 topBorderColor="#fbf3ff"
    >
 Set custom colors for the Accordion component.
    </Accordion>
Set custom colors for the Accordion component.