Accordion (Disclosure Group)
A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion. It supports both single and multiple expanded items.
Installation
CLI
Manual
Preview
Examples
Basic
A basic accordion that shows one item at a time. The first item is open by default.
accordion-basic
Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.
Multiple
Use allowMultipleExpanded to allow multiple items to be open at the same time.
accordion-multiple
Disabled
Use the isDisabled prop on AccordionItem to disable individual items.
accordion-with-disabled
Borders
Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.
accordion-with-borders
We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.
Card
Wrap the Accordion in a Card component.
accordion-in-card
Subscription & Billing
Common questions about your account, plans, payments and cancellations.
We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.