Collapsible

Collapsible content section featuring a header with a title and a trigger button, along with a panel that holds the content.

Basic

An accordion functions as a vertical stack of headers that expand to reveal or conceal content sections.

Preview

Code

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add disclosure

You can disable all collapsible by setting the isDisabled prop.

Preview

Code

You can control the collapsible by using the isExpanded prop.

Preview

Code

The Collapsible is collapsed.

If you're looking for a more advanced accordion, check out the Accordion component.