Accordion

Accordion renders vertical stacks of interactive collapsible panels ideal for FAQs, product specifications, and settings menus.

Usage

AccordionExample.tsx

import React from 'react';
import { Accordion, Box, Text } from '@masumdev/rn-ui';

export function AccordionExample() {
  const items = [
    {
      id: '1',
      title: 'Is @masumdev/rn-ui open source?',
      content: 'Yes, it is 100% open source under the MIT license.',
    },
    {
      id: '2',
      title: 'Does it support dark mode?',
      content: 'Yes, dark mode is supported out of the box with ThemeProvider.',
    },
  ];

  return (
    <Box gap="lg">
      {/* Outlined Variant */}
      <Accordion items={items} variant="outlined" />

      {/* Glassmorphism Variant */}
      <Accordion items={items} variant="glass" />

      {/* Flat Borderless Variant */}
      <Accordion items={items} variant="flat" />
    </Box>
  );
}

Props API

Prop	Type	Default	Description
items	AccordionItem[]	—	Array of accordion panel objects containing id, title, and content.
variant	'outlined' | 'flat' | 'ghost' | 'glass'	'outlined'	Visual container style variant.
type	'single' | 'multiple'	'single'	Determines whether one or multiple panels can be expanded at once.
value	string | string[]	—	Controlled value array or string of open panel IDs.
defaultValue	string | string[]	—	Uncontrolled initial open panel IDs.
onValueChange	(value: any) => void	—	Callback triggered when open panel selection changes.