Accordion

An Accordion component is a UI element that allows users to expand and collapse sections of content. It is commonly used to organize information in a compact and accessible manner, displaying only the headers by default and revealing the associated content when clicked. This helps improve the readability of complex or lengthy information by reducing clutter on the page.

Demo

Rendered live, with the same build of the library you install.

Single:

Multiple:

Usage

Source
Accordion.tsx
import { AccordionTypes, NAccordion } from '@nayan-ui/react';


const items = [
  { title: 'What is Nayan UI?', message: 'Nayan UI is a modern React component library built with TypeScript and Tailwind CSS.' },
  { title: 'How to install?', message: 'Install using npm: npm install @nayan-ui/react' },
  { title: 'Is it free?', message: 'Yes, Nayan UI is completely free and open source.' }
];


const Accordion = () => {
  return (
    <div>
      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Single:</h3>
      <NAccordion type={AccordionTypes.SINGLE} items={items} />


      <h3 className="text-foreground mb-2 mt-4 text-sm font-semibold">Multiple:</h3>
      <NAccordion type={AccordionTypes.MULTIPLE} items={items} />
    </div>
  );
};


export default Accordion;

Attributes

11 props
NameTypeDefaultDetails
classNamestring' 'You can customise by passing tailwind classes.
itemClassNamestring' 'You can customise by passing tailwind classes.
triggerClassNamestring' 'You can customise by passing tailwind classes.
contentClassNamestring' 'You can customise by passing tailwind classes.
typeAccordionTypesAccordionTypes.SINGLEYou can pass type of the accordion.
itemsAccordionListItem[]RequiredYou can pass list of accordion items.
keyExtractor(item: T, index: number) => string | numberOptionalCustom key extractor function for items.
renderTrigger(item: T, index: number) => React.ReactNodeOptionalCustom render function for accordion triggers.
renderContent(item: T, index: number) => React.ReactNodeOptionalCustom render function for accordion content.
indicatorClassNamestring' 'Custom class for the expand/collapse indicator.
variant'default' | 'surface''default'Visual variant of the accordion.

Tags

Other components solving nearby problems.