Accordion

Basic Accordion

Simple collapsible accordion with customizable header and content styling.

Accordions collapse long content into scannable sections, so users can expand only what they care about. They work well for FAQs, settings groups, and transaction details — anywhere showing everything at once would overwhelm the page. Keep each panel focused on a single topic.

Table Row with Accordion

Interactive table rows that expand to show additional details on click.

Mark Cameron	$129.00	Refunded	1	🇲🇽 New Mexico, MX	Subscription
Monthly renewal for the Team plan — 12 seats, billed to the card ending in 4242.

Rich Table Row with Accordion

Enhanced table rows with rich content including titles, descriptions, and formatted data.

Mark Cameron	mark.cameron@app.com	🇬🇧 London, UK	22/01/2021	+249.88
Card payment — Online store Accordions collapse long content into scannable sections, so users can expand only what they care about. They work well for FAQs, settings groups, and transaction details — anywhere showing everything at once would overwhelm the page. Keep each panel focused on a single topic and lead with the most frequently opened section.

Props Reference

AccordionBasic

Prop	Type	Description
title	string	The title text displayed in the accordion header
headerClassName	string	Custom CSS classes for the accordion header
labelClassName	string	Custom CSS classes for the title label
valueClassName	string	Custom CSS classes for the accordion content area
children	ReactNode	The content to display inside the accordion when expanded

AccordionTableItem

Prop	Type	Description
id	string	Unique identifier for the table row
image	string	URL of the customer image
customer	string	Customer name
total	string	Total amount
status	string	Order status
items	string	Number of items
location	string	Customer location
type	string	Order type
description	string	Detailed description shown when expanded

Components