Accordion components
14 free, copy-and-go React Accordion examples built on the SevenUI Accordion primitive. Install any of them with the shadcn CLI.
On this page
Product details
Outlined panels for product details, materials and care, size and fit, and shipping on a product page.
Course curriculum
Course modules with progress and duration in each trigger, opening to lesson lists with completed, up next, and locked states.
Course content
9 lessons · 1h 30mModule 3 unlocks when you finish Building components.
FAQ section
A pricing FAQ with a heading, description, accordion list, and a support email link.
Frequently asked questions
Plans, billing, and what happens to your data.
Still stuck? Email our support team.
Plan-gated item
API settings where a section tied to a higher plan is disabled and labeled with a plan badge.
Sections marked with a plan name unlock when you upgrade.
Ghost plus toggle
Borderless ghost rows with a leading plus that rotates into a close mark, and indented answers.
Controlled expand all
Controlled multiple-mode release notes with an Expand all / Collapse all toggle and a live open count.
Release 2.4.0
1 of 4 sections expanded
- Saved views can now be shared with a public read-only link.
- Bulk edit supports up to 500 rows at a time.
Elevated active item
A two-factor method picker on a muted tray where the open item lifts into an elevated card with a filled icon tile.
Team member rows
Members with avatar, name, title, and role badge in each trigger; details open as a definition list.
CI check states
CI checks with passed, warning, failed, and in-progress states; the running item is disabled and shows a spinner.
Checks for fix/cart-rounding
2 of 4 passingFAIL checkout/cart.test.ts applies percentage discount Expected: 90.00 Received: 89.99
Nested accordion
Troubleshooting categories that each open into a nested multiple-mode accordion of articles.
Notification preferences
Email notification switches grouped by category, with a live on-count in each trigger.
Email notifications
Choose what lands in your inbox at mara@northwind.dev.
When someone @mentions you or replies to your thread.
When an issue or review is assigned to you.
A 9:00 AM summary of everything you missed.
Onboarding checklist
A setup checklist with a progress bar that opens the next unfinished step when one is marked done.
Get started with Relay
Finish these steps to unlock preview deployments.
Projects move faster with reviewers. Invite at least two teammates by email or share a join link.
Billing history
Invoices with amount and payment status in each trigger, expanding to line items, a retry action, and a PDF download.
Billing history
Invoices are issued on the 14th of each month.
- Team plan · 12 seats
- $144.00
- Extra build minutes · 2,000
- $16.00
- Total
- $160.00
Visa ending 4242 was declined. We'll retry on Sep 17.
Roles and permissions
Team roles with member avatars that expand to permission checkboxes, tracking unsaved changes with save and discard.
Roles and permissions
Changes apply to every member with that role.
All changes saved
Components are the parts. Blocks are the page.
Pro blocks are whole sections and pages — heroes, pricing, dashboards, auth — composed from the same primitives and themed by the same tokens you already use. Install one and it is yours.
One purchase, yours forever. $99 at launch instead of $249.