Accordion Component

The Accordion component is a flexible UI primitive built with React and TypeScript. It allows users to expand and collapse content sections, making it ideal for FAQs, documentation, and content-heavy interfaces.

It supports single or multiple open sections via allowMultiple, controlled default state using defaultOpen, and customization hooks for the item, header, title, icon, content wrapper, and content areas.

Use iconOpen and iconClose to customize expand/collapse indicators, and renderItem for full control over each accordion item layout and behavior.

Import Component From Library

react

1import { Accordion } from "@neuctra/ui";

Basic Usage Code

Start with a simple accordion. The component supports collapsible content sections with customizable headers and icons.

jsx

1import { Accordion } from '@neuctra/ui';
2
3function BasicExample() {
4  const items = [
5    {
6      title: "What is Neuctra UI?",
7      content: "Neuctra UI is a modern React component library.",
8    },
9    {
10      title: "Is it customizable?",
11      content: "Yes, fully customizable via className and styles.",
12    }
13  ];
14
15  return (
16    <Accordion items={items} />
17  );
18}

Basic Example

Neuctra UI is a modern, customizable React component library.

Yes, fully customizable via className and inline styles.

Yes, built-in dark mode support using Tailwind classes.

Advanced Usage

Neuctra UI is a modern, customizable React component library.

Yes, fully customizable via className and inline styles.

Yes, built-in dark mode support using Tailwind classes.

Neuctra UI is a modern, customizable React component library.

Yes, fully customizable via className and inline styles.

Yes, built-in dark mode support using Tailwind classes.

Neuctra UI is a modern, customizable React component library.

Yes, fully customizable via className and inline styles.

Yes, built-in dark mode support using Tailwind classes.

Props Table

Prop	Type	Default	Description
AccordionItem	{ title: string \| ReactNode; content: ReactNode }	—	Shape used by each item in items
items	AccordionItem[]	—	List of accordion items
allowMultiple	boolean	false	Allow multiple open items
defaultOpen	number[]	[]	Indexes open by default
className	string	—	Root class
style	CSSProperties	—	Root inline styles
itemClassName	string	—	Item wrapper class
itemStyle	CSSProperties	—	Item wrapper inline styles
headerClassName	string	—	Header class
contentClassName	string	—	Content class
headerStyle	CSSProperties	—	Header inline styles
titleClassName	string	—	Title span class
titleStyle	CSSProperties	—	Title span inline styles
iconClassName	string	—	Icon wrapper class
iconStyle	CSSProperties	—	Icon wrapper inline styles
contentWrapperClassName	string	—	Collapsible wrapper class
contentWrapperStyle	CSSProperties	—	Collapsible wrapper inline styles
contentStyle	CSSProperties	—	Content inline styles
hoverClassName	string	—	Additional classes applied to header
hoverStyle	CSSProperties	—	Additional inline styles on header
borderColor	string	"var(--border)"	Available in the type for custom integrations
radius	string \| number	"0.5rem"	Available in the type for custom integrations
shadow	string	"none"	Available in the type for custom integrations
duration	number	300	Animation duration (ms)
iconOpen	ReactNode	—	Custom open icon
iconClose	ReactNode	—	Custom close icon
renderItem	function	—	Fully custom render logic

Common Mistakes

<Accordion defaultOpen={1} />

defaultOpen must be an array of indexes.

<Accordion items={[]} />

Ensure items array is not empty.

<Accordion className="max-w-lg" />

Use className for layout control.

Pro Tips

Use allowMultiple for FAQ-style layouts.
Use renderItem for full custom UI control.
Combine className + style for maximum flexibility.
Keep content lightweight for better performance.
Use Tailwind dark classes for automatic dark mode.

Frequently Asked Questions

How do I install and import the Accordion component?

Install the @neuctra/ui package, then import it with: import { Accordion } from "@neuctra/ui";

Can I customize the Accordion component's appearance?

Yes. Accordion accepts a className prop for custom Tailwind CSS classes, so you can adjust spacing, layout, and styling without overriding the component internals.

Is the Accordion component accessible?

Accordion is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.