Accordion
Show and hide sections of related content, one item at a time or several in parallel.
We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.
<Accordion type="single" collapsible defaultValue="shipping" className="max-w-lg"> <AccordionItem value="shipping"> <AccordionTrigger>What are your shipping options?</AccordionTrigger> <AccordionContent> We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders. </AccordionContent> </AccordionItem> <AccordionItem value="returns"> <AccordionTrigger>What is your return policy?</AccordionTrigger> <AccordionContent> Returns accepted within 30 days. Items must be unused and in original packaging. Refunds processed within 5-7 business days. </AccordionContent> </AccordionItem> <AccordionItem value="support"> <AccordionTrigger>How can I contact customer support?</AccordionTrigger> <AccordionContent> Reach us via email, live chat, or phone. We respond within 24 hours during business days. </AccordionContent> </AccordionItem></Accordion>Usage
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@reva/ui";Use type="single" with collapsible to let one panel open at a time (and close when clicked again), or type="multiple" to let several open in parallel. Every AccordionItem needs a unique value string.
Composition
Use the following composition to build an Accordion:
Accordion
├── AccordionItem
│ ├── AccordionTrigger
│ └── AccordionContent
├── AccordionItem
│ ├── AccordionTrigger
│ └── AccordionContent
└── AccordionItem
├── AccordionTrigger
└── AccordionContentExamples
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.
<Accordion type="single" collapsible defaultValue="item-1" className="max-w-lg"> <AccordionItem value="item-1"> <AccordionTrigger>How do I reset my password?</AccordionTrigger> <AccordionContent> 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. </AccordionContent> </AccordionItem> <AccordionItem value="item-2"> <AccordionTrigger>Can I change my subscription plan?</AccordionTrigger> <AccordionContent> Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in your next billing cycle. </AccordionContent> </AccordionItem> <AccordionItem value="item-3"> <AccordionTrigger>What payment methods do you accept?</AccordionTrigger> <AccordionContent> We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our payment partners. </AccordionContent> </AccordionItem></Accordion>Multiple
Use type="multiple" to allow several 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.
<Accordion type="multiple" defaultValue={["notifications"]} className="max-w-lg"> <AccordionItem value="notifications"> <AccordionTrigger>Notification Settings</AccordionTrigger> <AccordionContent> Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices. </AccordionContent> </AccordionItem> <AccordionItem value="privacy"> <AccordionTrigger>Privacy & Security</AccordionTrigger> <AccordionContent> Control your privacy settings and security preferences. Enable two-factor authentication, manage connected devices, review active sessions, and configure data sharing preferences. You can also download your data or delete your account. </AccordionContent> </AccordionItem> <AccordionItem value="billing"> <AccordionTrigger>Billing & Subscription</AccordionTrigger> <AccordionContent> View your current plan, payment history, and upcoming invoices. Update your payment method, change your subscription tier, or cancel your subscription. </AccordionContent> </AccordionItem></Accordion>Disabled
Use the disabled prop on AccordionItem to disable individual items.
<Accordion type="single" collapsible className="max-w-lg"> <AccordionItem value="item-1"> <AccordionTrigger>Can I access my account history?</AccordionTrigger> <AccordionContent> Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard. </AccordionContent> </AccordionItem> <AccordionItem value="item-2" disabled> <AccordionTrigger>Premium feature information</AccordionTrigger> <AccordionContent> This section contains information about premium features. Upgrade your plan to access this content. </AccordionContent> </AccordionItem> <AccordionItem value="item-3"> <AccordionTrigger>How do I update my email address?</AccordionTrigger> <AccordionContent> You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change. </AccordionContent> </AccordionItem></Accordion>Borders
Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to frame the list.
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.
<Accordion type="single" collapsible defaultValue="billing" className="max-w-lg rounded-lg border"> <AccordionItem value="billing" className="border-b px-4 last:border-b-0"> <AccordionTrigger>How does billing work?</AccordionTrigger> <AccordionContent> 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. </AccordionContent> </AccordionItem> <AccordionItem value="security" className="border-b px-4 last:border-b-0"> <AccordionTrigger>Is my data secure?</AccordionTrigger> <AccordionContent> Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. </AccordionContent> </AccordionItem> <AccordionItem value="integration" className="border-b px-4 last:border-b-0"> <AccordionTrigger>What integrations do you support?</AccordionTrigger> <AccordionContent> We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build custom integrations using our REST API and webhooks. </AccordionContent> </AccordionItem></Accordion>Card
Wrap the Accordion in a Card to group related FAQs under a title and description.
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.
<Card className="w-full"> <CardHeader> <CardTitle>Subscription & Billing</CardTitle> <CardDescription> Common questions about your account, plans, payments and cancellations. </CardDescription> </CardHeader> <CardContent> <Accordion type="single" collapsible defaultValue="plans"> <AccordionItem value="plans"> <AccordionTrigger>What subscription plans do you offer?</AccordionTrigger> <AccordionContent> 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. </AccordionContent> </AccordionItem> <AccordionItem value="billing"> <AccordionTrigger>How does billing work?</AccordionTrigger> <AccordionContent> Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal, and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment. </AccordionContent> </AccordionItem> <AccordionItem value="cancel"> <AccordionTrigger>How do I cancel my subscription?</AccordionTrigger> <AccordionContent> You can cancel your subscription anytime from your account settings. There are no cancellation fees or penalties. Your access will continue until the end of your current billing period. </AccordionContent> </AccordionItem> </Accordion> </CardContent></Card>Props
Radix Accordion forwards props to the root; below are the main surface APIs.
Accordion (root)
| Prop | Type | Default | Description |
|---|---|---|---|
type | "single" | "multiple" | — | Required. Whether one or several items can be open at once. |
collapsible | boolean | false | type="single" only. Allow the open item to close when clicked again. |
defaultValue | string | string[] | — | Initial open item(s). Array when type="multiple". |
value | string | string[] | — | Controlled open item(s). |
onValueChange | (value: string | string[]) => void | — | Controlled change handler. |
disabled | boolean | false | Disable all items. |
orientation | "horizontal" | "vertical" | "vertical" | Layout and arrow-key navigation axis. |
dir | "ltr" | "rtl" | "ltr" | Reading direction. |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Required. Unique identifier matched against value / defaultValue on Accordion. |
disabled | boolean | false | Disable this item's trigger. |
AccordionTrigger / AccordionContent
Forward all props to the underlying Radix Trigger / Content. Accept className for layout adjustments.