Accordion

Basic Accordion

Simple collapsible accordion with customizable header and content styling.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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
Excepteur sint occaecat cupidatat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis. Ut enim ad minim veniam quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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