Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.
Installation
Usage
<Accordion defaultValue=["item-1"]>
<Accordion.Item value="item-1">
<Accordion.Trigger> {"Is it accessible?"->React.string} </Accordion.Trigger>
<Accordion.Content>
{"Yes. It adheres to the WAI-ARIA design pattern."->React.string}
</Accordion.Content>
</Accordion.Item>
</Accordion>Examples
Basic
A basic accordion that shows one item at a time. The first item is open by default.
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 the multiple prop to allow multiple items to be open at the same time.
Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.
Disabled
Use the disabled prop on AccordionItem to disable individual items.
Borders
Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.
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.
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.
API Reference
See the Base UI documentation for more information.