Components

Accordion variants

Opinionated FAQ and layout presets built on Accordion—cards, grouped boxes, plus/minus, accent states, icons, profiles, and nested sections.

SourceRegistry

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

Loading...

Installation

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

1

Install the component

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

watermelon add accordion-variants
2

Install manual dependencies

If you are wiring the component manually, install the package dependencies shown below.

npm install accordion
3

Import the component

Import Accordion variants from your local UI registry output.

Import

import { AccordionVariants } from "@/components/ui/accordion-variants";

Import

Import

import {
AccordionVariantList,
AccordionVariantCards,
AccordionVariantGrouped,
AccordionVariantPlusMinus,
AccordionVariantAccent,
AccordionVariantLeadIcons,
AccordionVariantSubtitled,
AccordionVariantProfile,
AccordionVariantNested,
ACCORDION_VARIANT_FAQ_DEFAULT,
} from "@/components/ui/accordion-variants";

Usage

Each export renders the same default FAQ copy unless you pass items. Use AccordionVariantNested for a category accordion that contains another accordion inside the first panel.

Loading...

Presets

proptypedefaultdescription
AccordionVariantList() => …—Hairline separators; default trigger + chevron.
AccordionVariantCards() => …—Each item in its own rounded bordered card with vertical gap.
AccordionVariantGrouped() => …—Single outer border with internal dividers.
AccordionVariantPlusMinus() => …—Bold titles with + / − affordance.
AccordionVariantAccent() => …—Orange header and rule when expanded (web uses Tailwind; native uses hex).
AccordionVariantLeadIcons() => …—Leading icon + title + chevron.
AccordionVariantSubtitled() => …—Circular icon, title, subtitle, plus/minus in a grouped shell.
AccordionVariantProfile() => …—Avatar, name, email; bio in content.
AccordionVariantNested() => …—Shipping category opens to a nested FAQ accordion.
NextAccordion