A vertically stacked set of interactive headings that each reveal a section of content. Uses react-native-reanimated on native and Radix UI Accordion on web.

Installation

npm
yarn
pnpm
bun
npm install @radix-ui/react-accordion
Copy

Usage

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

Examples

Default

A basic FAQ-style accordion with collapsible items.

Default Accordion

You can place an order by browsing our products, adding items to your cart, and proceeding to checkout. We accept all major credit cards and PayPal.

View Code
Copy

With Icons

Add icons to accordion triggers for visual context.

Accordion with Icons

View Code
Copy

Multiple Selection

Allow multiple items to be expanded simultaneously.

Multiple Selection

Update your name, email, phone number, and profile picture. Your information is securely stored and never shared.

Choose how and when you receive notifications. Customize email, push, and SMS preferences.

View Code
Copy

Without Borders

Remove the default border styling for a cleaner look.

Borderless Accordion

View Code
Copy

Rich Content

Accordion content can include any components, not just text.

Rich Content

󰗠
Offline mode support
󰗠
Real-time sync
󰗠
End-to-end encryption
󰗠
Cross-platform support

View Code
Copy

Custom Indicator

Replace the default chevron with a custom indicator using the indicator prop. Use the useAccordionItem hook to access the expanded state.

import { Accordion, useAccordionItem } from "@/components/ui/accordion"; function PlusMinusIndicator() { const { isExpanded } = useAccordionItem(); return ( <View className="h-5 w-5 items-center justify-center rounded-full bg-sf-fill"> <SFIcon name={isExpanded ? "minus" : "plus"} size={12} className="text-sf-text-2" /> </View> ); } <Accordion type="single" collapsible> <Accordion.Item value="item-1"> <Accordion.Trigger indicator={<PlusMinusIndicator />}> What payment methods do you accept? </Accordion.Trigger> <Accordion.Content> <Text>We accept all major credit cards, PayPal, and Apple Pay.</Text> </Accordion.Content> </Accordion.Item> </Accordion>
Copy

You can also pass a static element as the indicator:

Static Custom Indicator

View Code
Copy

No Indicator

Hide the indicator entirely by setting indicator={false}.

No Indicator

View Code
Copy

API Reference

Accordion

The root container for the accordion.

Prop
Type
Default
Description
type
"single" | "multiple"
"single"
Whether single or multiple items can be expanded at once
defaultValue
string | string[]
-
The value of the item(s) to expand by default
value
string | string[]
-
The controlled value of the expanded item(s)
onValueChange
(value: string | string[]) => void
-
Callback when the expanded item(s) change
collapsible
boolean
false
When type is 'single', allows closing all items
className
string
-
CSS classes for styling the container

Accordion.Item

A single accordion item containing a trigger and content.

Prop
Type
Default
Description
value*
string
-
A unique value for this item
className
string
-
CSS classes for styling the item

Accordion.Trigger

The button that toggles the accordion item.

Prop
Type
Default
Description
children
ReactNode
-
The trigger content (text or custom components)
indicator
ReactNode | false
-
Custom indicator element, or false to hide the indicator
className
string
-
CSS classes for styling the trigger

Accordion.Content

The content revealed when the accordion item is expanded.

Prop
Type
Default
Description
children
ReactNode
-
The content to display when expanded
className
string
-
CSS classes for styling the content

useAccordionItem

A hook to access the accordion item state. Useful for building custom indicators.

import { useAccordionItem } from "@/components/ui/accordion"; function CustomIndicator() { const { isExpanded, toggle } = useAccordionItem(); return <Text>{isExpanded ? "Open" : "Closed"}</Text>; }
Copy

Returns:

  • isExpanded: boolean - Whether the item is currently expanded
  • toggle: () => void - Function to toggle the item's expanded state
  • value: string - The item's value

Platform Differences

Native (iOS/Android)

  • Uses react-native-reanimated for smooth height and opacity animations
  • Chevron icon animates rotation using shared values
  • Content height is measured on first render for accurate animations
  • SF Symbols used for the chevron indicator

Web

  • Uses Radix UI Accordion primitives for accessibility
  • CSS keyframe animations for expand/collapse
  • Built-in keyboard navigation support
  • data-slot attributes for styling with CSS selectors
  • Lucide icons used for the chevron indicator

Accessibility

  • Trigger buttons have proper ARIA attributes (aria-expanded, aria-controls)
  • Keyboard navigation: Enter/Space to toggle, Arrow keys to navigate between items
  • Screen reader support through semantic HTML on web
  • Focus management handled automatically