Components
Accordion

Accordion Component

Installation

The Accordion component provides an expandable/collapsible content container.

Installation Command
npx @nativecn/cli add accordion

Basic Usage

Basic Accordion

What is an accordion?

An accordion is a vertically stacked set of interactive headings that each reveal a section of content.

When to use?

Use accordions to organize related content into collapsible sections, making the page easier to scan and digest.

Multiple Sections

Multiple Sections Open

First Section

This is the first section's content. Multiple sections can be open at once.

Second Section

This is the second section's content. Try opening both sections!

Usage Example

Basic Accordion Implementation
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../components/ui/accordion';
import { useColorScheme } from 'react-native';

export function FAQSection() {
  const colorScheme = useColorScheme();
  
  return (
    <Accordion 
      type="single"
      collapsible
      mode={colorScheme} // 'light' or 'dark' based on system preference
    >
      <AccordionItem id="faq-1">
        <AccordionTrigger>Question 1</AccordionTrigger>
        <AccordionContent>Answer to question 1</AccordionContent>
      </AccordionItem>
      <AccordionItem id="faq-2">
        <AccordionTrigger>Question 2</AccordionTrigger>
        <AccordionContent>Answer to question 2</AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

Reference

Accordion Props
// Root Accordion Props
interface AccordionProps {
  type?: 'single' | 'multiple';
  collapsible?: boolean;
  defaultValue?: string[];
  value?: string[];
  onValueChange?: (value: string[]) => void;
  className?: string;
  mode?: 'light' | 'dark';
  children: React.ReactNode;
}

// AccordionItem Props
interface AccordionItemProps {
  id: string;
  className?: string;
  children: React.ReactNode;
}

// AccordionTrigger Props
interface AccordionTriggerProps {
  className?: string;
  textClassName?: string;
  children: React.ReactNode;
}

// AccordionContent Props
interface AccordionContentProps {
  className?: string;
  contentClassName?: string;
  textClassName?: string;
  children: React.ReactNode;
}
Getting StartedAlert