An Accordion component allows users to expand and collapse sections of content, organizing information compactly. Built on top of heroui-native Accordion.

Demo

Demo Coming Soon

Accordion examples will be available soon.

Usage

import { NAccordion, AccordionTypes } from '@nayan-ui/react';

const Accordion = () => {
  const items = [
    { title: 'Heading 1', message: 'Description 1' },
    { title: 'Heading 2', message: 'Description 2' }
  ];

  return (
    <div>
      <h1 className="text-foreground mb-3 text-lg">Single:</h1>
      <NAccordion type={AccordionTypes.SINGLE} items={items} />
      <h1 className="text-foreground mb-3 mt-5 text-lg">Multiple:</h1>
      <NAccordion type={AccordionTypes.MULTIPLE} items={items} />
    </div>
  );
};

export default Accordion;

Attributes

Name	Type	Default	Details
items	AccordionItemData[]	Required	Array of accordion items with id, title, content, and optional isDisabled.
selectionMode	'single' \| 'multiple'	'single'	Whether single or multiple items can be expanded.
defaultValue	string \| string[]	Optional	Default expanded item values.
variant	'default' \| 'surface'	Optional	Visual variant style.
hideSeparator	boolean	false	Whether to hide separators between items.
isCollapsible	boolean	false	Whether expanded items can be collapsed.
isDisabled	boolean	false	Whether the accordion is disabled.
className	string	' '	You can customise by passing tailwind classes.
itemClassName	string	' '	You can customise by passing tailwind classes.
titleClassName	string	' '	You can customise by passing tailwind classes.
contentClassName	string	' '	You can customise by passing tailwind classes.

Accordion

Demo

Demo Coming Soon

Usage

Attributes

Tags