Components

Accordion

A grouped disclosure pattern for setup steps, FAQs, and stacked sections that expand in place.

Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.

Use accordion items to reveal grouped content one section at a time.

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Run the registry command below to add accordion to your project.

watermelon add accordion

Import Accordion from your local UI registry output.

Import

import { Accordion } from "@/components/ui/accordion";

import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@/components/ui/accordion";

Use accordion items to reveal grouped content one section at a time.

prop	type	default	description
type	"single" \| "multiple"	"single"	Controls whether one or many items can stay open.
value / defaultValue	string \| string[]	-	Sets the open item or items.
onValueChange	(value: string \| string[]) => void	-	Called when the expanded item set changes.