Accordion
A vertically stacked set of interactive headings that reveal associated content.
Default
The default accordion uses bottom borders to separate items.
Bordered
Wraps all items in a rounded border container for a contained look.
Separated
Each item has its own border and rounded corners with spacing between.
Multiple Selection
Allows multiple items to be expanded at the same time.
Run
npm install to install all dependencies. Make sure you have Node.js 18+ installed.With Icons
Add icons to accordion triggers for better visual hierarchy.
FAQ Example
A real-world FAQ section with the default variant.
Disabled State
Accordion items can be disabled to prevent interaction.