Accordion Component
An Accordion is a web component that allows users to expand or collapse content sections to save space and simplify navigation.
Installation
Ensure that have the @zyxui library installed in your project:
If you haven't install and setup @zyxui before please follow the installation guide
Basic Accordion
To create a basic accordion, simply write this code below:
This is content of Item One
This is content of Item Two
Customization
Personalize your accordion component with ease using our provided props.
Variants
Our Accordion component currently offers two distinct variants: default and bordered.
Default Variant
This is content of Item One
This is content of Item Two
Bordered Variant
This is content of Item One
This is content of Item Two
Multiple
Multiple openable accordions allow you to expand more than one section at a time, providing flexible content access.
the default value is false, so you will need to pass multiple props as true
Multiple Accordion
This is content of Item One
This is content of Item Two
Sizes
The Accordion component also comes in different sizes, offering customization options by using the size prop with sm, md, or lg`.
Small Size Accordion
This is content of Item One
This is content of Item Two
Medium Size Accordion (The default size)
This is content of Item One
This is content of Item Two
Large Size Accordion
This is content of Item One
This is content of Item Two
Icon Position
You can easily change the position of the accordion icon to either the start or the end as per your preference. The default value is end
Start Icon Position
This is content of Item One
This is content of Item Two
API Reference
| Property | Description | Type | Default |
|---|---|---|---|
| items | Accordion items | {id: number | string; title: string; content: ReactNode}[] | [] |
| variant | Change accordion base styles. | default | bordered | default |
| size | Accordion size. | ms | md | lg | md |
| multiple | Multiple openable items. | boolean | false |
| iconPosition | Change accordion icon position. | start | end | end |
| className | Adding custom class names to your accordion. | string | undefined |