Accordion
Expand & collapse content sections vertically.
Installation
pnpm add @base-ui/react motionExamples
Free, accessible React accordion components built with Base UI for FAQs, settings panels, and nested content.
Base
Invoices are generated on the first of each month for the previous month's usage. You have 14 days to review and payment is automatically processed on the 15th.
You can assign Admin, Editor, or Viewer roles. Admins can manage billing and team settings, Editors can create and edit content, and Viewers have read-only access.
Yes, go to Team Settings > Permissions to configure project-level access. You can override the default role permissions for any team member.
Bordered
A bordered style with spacing between items.
You can return most items within 30 days of delivery. Items must be unused and in original packaging. Start a return from your order history.
Standard shipping takes 5-7 business days. Express shipping is 2-3 days. Free shipping is available on orders over $50.
We accept all major credit cards, PayPal, Apple Pay, and Google Pay. You can also save your payment methods for faster checkout.
Ghost
Items highlight with a left-border accent when expanded.
Go to Settings > Privacy to choose who sees your profile. Options are Everyone, Friends Only, or Only Me. Post visibility is set per post.
Tap the three dots on any post or profile and select Report. Choose the reason and provide any additional details. Our team reviews all reports within 24 hours.
Yes, go to a user's profile, tap the three dots, and select Block. They won't be notified, and they won't be able to see or interact with your content.
Subtle
Items use a light indigo fill that remains consistent.
Go to Settings > Notifications and toggle email alerts. Choose when to receive them: immediately, daily digest, or weekly summary.
Yes, install the Slack integration in Settings > Integrations. Map workspace events to specific Slack channels.
Navigate to Settings > Appearance to choose between Light, Dark, or System. You can also add a custom logo and brand colors.
Icons
Use Plus & Minus icons instead of the default caret.
Go to Settings > Integrations to browse available apps. Click Install and authorize the connection in your workspace.
Navigate to Settings > Webhooks to create custom endpoints. Configure events like task created, status changed, or comment added.
Yes, generate an API key in Settings > API. Use REST or GraphQL endpoints to read, create, and update resources programmatically.
Icons Left
Place the icon on the left side of the trigger.
Go to Settings > Privacy to choose who sees your profile. Options are Everyone, Friends Only, or Only Me. Post visibility is set per post.
Tap the three dots on any post or profile and select Report. Choose the reason and provide any additional details. Our team reviews all reports within 24 hours.
Yes, go to a user's profile, tap the three dots, and select Block. They won't be notified, and they won't be able to see or interact with your content.
Default Open
Pre-open one or more panels on initial render.
4 people mentioned you in conversations
12 unread messages from your conversations
You have blocked 8 accounts
Disabled
Disable individual panels for locked features.
Perfect for small teams getting started. Includes 5 projects, 10GB storage, and email support. All core features included.
Advanced analytics, unlimited projects, priority support, and custom integrations. Perfect for growing teams.
Dedicated account manager, SSO, SLA guarantee, and custom contracts. Contact sales for pricing details.
No Separator
A borderless, spacious variant for product specifications.
Display: 6.7-inch AMOLED, 120Hz refresh rate. Processor: Octa-core 3.2GHz. RAM: 12GB LPDDR5. Storage: 256GB UFS 4.0. Battery: 5000mAh with 65W fast charging.
Free standard shipping on all orders. Express delivery in 2-3 business days for $9.99. International shipping available to 40+ countries. Order processing within 24 hours.
2-year manufacturer warranty included. 30-day hassle-free returns. Extended warranty available at checkout. Worldwide service center support.
Multiple
Allow multiple panels to be open at the same time.
Standard shipping takes 5-7 business days. Express shipping is 2-3 days. Free shipping is available on orders over $50.
You'll receive a tracking number via email once your order ships. Use it on our tracking page to see real-time updates on delivery status.
Yes, exchanges are free within 30 days. Visit your order history, select the item, and choose Exchange. We'll ship the replacement immediately.
Multiple Bordered
Allow multiple panels open with bordered items.
Standard shipping takes 5-7 business days. Express shipping is 2-3 days. Free shipping is available on orders over $50.
You'll receive a tracking number via email once your order ships. Use it on our tracking page to see real-time updates on delivery status.
Yes, exchanges are free within 30 days. Visit your order history, select the item, and choose Exchange. We'll ship the replacement immediately.
Multiple Ghost
Allow multiple panels open with left-border accent.
Standard shipping takes 5-7 business days. Express shipping is 2-3 days. Free shipping is available on orders over $50.
You'll receive a tracking number via email once your order ships. Use it on our tracking page to see real-time updates on delivery status.
Yes, exchanges are free within 30 days. Visit your order history, select the item, and choose Exchange. We'll ship the replacement immediately.
Multiple Subtle
Allow multiple panels open with light fill.
Standard shipping takes 5-7 business days. Express shipping is 2-3 days. Free shipping is available on orders over $50.
You'll receive a tracking number via email once your order ships. Use it on our tracking page to see real-time updates on delivery status.
Yes, exchanges are free within 30 days. Visit your order history, select the item, and choose Exchange. We'll ship the replacement immediately.
Multiple Icons Left
Allow multiple panels open with icons on left.
Standard shipping takes 5-7 business days. Express shipping is 2-3 days. Free shipping is available on orders over $50.
You'll receive a tracking number via email once your order ships. Use it on our tracking page to see real-time updates on delivery status.
Yes, exchanges are free within 30 days. Visit your order history, select the item, and choose Exchange. We'll ship the replacement immediately.
Multiple Default Open
Pre-open multiple panels on initial render.
Standard shipping takes 5-7 business days. Express shipping is 2-3 days. Free shipping is available on orders over $50.
You'll receive a tracking number via email once your order ships. Use it on our tracking page to see real-time updates on delivery status.
Yes, exchanges are free within 30 days. Visit your order history, select the item, and choose Exchange. We'll ship the replacement immediately.
Static
Open and close instantly, without animation.