Components
Accordion

Accordion Variants

The Accordion component in sidcn allows you to create interactive accordion sections within your React Native and Expo applications. With easy-to-use components, you can display and organize content in a collapsible manner, enhancing user experience.

HelloHello

Add Accordion

The primary variant is designed for the main action or call-to-action buttons.

npx sidcn add accordion

Reset Cache

yarn start --clear // yarn
 
npm start -- --reset-cache // npm

Import Accordion

The primary variant is designed for the main action or call-to-action buttons.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '/components/sidcn/ui/accordion';

How to use

Create individual accordion items with triggers and content.

<Accordion>
  <AccordionItem>
    <AccordionTrigger>
      Open Accordion 1
    </AccordionTrigger>
    <AccordionContent>
      This is accordion detail
    </AccordionContent>
  </AccordionItem>
 
  <AccordionItem>
    <AccordionTrigger>
      Open Accordion 2
    </AccordionTrigger>
    <AccordionContent>
      This is accordion detail
    </AccordionContent>
  </AccordionItem>
 
  <AccordionItem>
    <AccordionTrigger>
      Open Accordion 3
    </AccordionTrigger>
    <AccordionContent>
      This is accordion detail
    </AccordionContent>
  </AccordionItem>
</Accordion>

Use with className

<Accordion>
  <AccordionItem>
    <AccordionTrigger className="bg-blue-500 text-white p-2 cursor-pointer">
      Custom Accordion Trigger
    </AccordionTrigger>
    <AccordionContent className="bg-gray-200 p-4">
      This is customized accordion detail
    </AccordionContent>
  </AccordionItem>
</Accordion>
React NativeAlert