Components
Disclosure | Collapsible
An interactive UI component that expands or collapses content sections, improving accessibility and user experience.
Basic
An accordion functions as a vertical stack of headers that expand to reveal or conceal content sections.
Preview
Code
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Manual Installation
Make sure you also install the composed components and the required packages for the component to function properly.
Anatomy
Disabled
You can disable all disclosure by setting the isDisabled prop.
Preview
Code
Controlled
You can control the disclosure by using the isExpanded prop.
Preview
Code
The disclosure is collapsed.
Accordion
If you're looking for a more advanced accordion, check out the Disclosure Group component.
Get premium Blocks
Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.