GitHub
Copy-pasteStyled

Accordion

A vertically stacked set of interactive headings with content

Accordion organizes related sections into keyboard-navigable items that can expand one at a time or in groups.

Features

  • Full keyboard navigation

  • Single or multiple expanded items

  • Controlled or uncontrolled state

Installation

Accordion is already installed in tamagui, or you can install it independently:

yarn add @tamagui/accordion

Anatomy

Import all parts and piece them together.

// copy-paste: these skins import from files you own. copy each registry item

// below into your app, then adjust the relative import paths to fit.

//   components/tamagui/Accordion.tsx (registry item "accordion")

// npm dependencies: @tamagui/accordion @tamagui/core

import { Accordion } from "../components/tamagui/Accordion"; // or '@tamagui/accordion'

export default () => <Accordion>

    <Accordion.Item>

      <Accordion.Header>

        <Accordion.Trigger />

      </Accordion.Header>

      <Accordion.Content />

    </Accordion.Item>

  </Accordion>;

API reference

Accordion

Contains all the parts of an accordion.

Props

  • asChild

    boolean

    Default: 

    false

    Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

  • type (required)

    "single" | "multiple"

    Determines whether one or multiple items can be opened at the same time.

  • value

    string

    The controlled value of the item to expand when type is "single". Must be used in conjunction with onValueChange.

  • defaultValue

    string

    The value of the item to expand when initially rendered and type is "single". Use when you do not need to control the state of the items.

  • onValueChange

    (value: string) => void

    Event handler called when the expanded state of an item changes and type is "single".

  • value

    string[]

    Default: 

    []

    The controlled value of the item to expand when type is "multiple". Must be used in conjunction with onValueChange.

  • defaultValue

    string[]

    Default: 

    []

    The value of the item to expand when initially rendered when type is "multiple". Use when you do not need to control the state of the items.

  • onValueChange

    (value: string[]) => void

    Event handler called when the expanded state of an item changes and type is "multiple".

  • collapsible

    boolean

    Default: 

    false

    When type is "single", allows closing content when clicking trigger for an open item.

  • disabled

    boolean

    Default: 

    false

    When true, prevents the user from interacting with the accordion and all its items.

  • orientation

    "horizontal" | "vertical"

    Default: 

    "vertical"

    The layout of the accordion. Determines which arrow keys move between triggers.

  • dir

    "ltr" | "rtl"

    Default: 

    "ltr"

    The reading direction of the accordion when applicable. If omitted, assumes LTR (left-to-right) reading mode.

    • Accordion.Item

    Contains all the parts of a collapsible section.

    Props

  • asChild

    boolean

    Default: 

    false

    Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

  • disabled

    boolean

    Default: 

    false

    When true, prevents the user from interacting with the item.

  • value (required)

    string

    A unique value for the item.

    • Accordion.Header

    Wraps an Accordion.Trigger. Use the asChild prop to update it to the appropriate heading level for your page.

    Props

  • asChild

    boolean

    Default: 

    false

    Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

    • Accordion.Trigger

    Toggles the collapsed state of its associated item. It should be nested inside of an Accordion.Header.

    Props

  • asChild

    boolean

    Default: 

    false

    Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

    • Accordion.Content

    Contains the collapsible content for an item.

    Props

  • asChild

    boolean

    Default: 

    false

    Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

  • forceMount

    boolean

    Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

    • Examples

    Expanded by default

    Use the defaultValue prop to define the open item by default.

    <Accordion type="single" defaultValue="item-2">

      <Accordion.Item value="item-1">…</Accordion.Item>

      <Accordion.Item value="item-2">…</Accordion.Item>

    </Accordion>

    Allow collapsing all items

    Use the collapsible prop to allow all items to close.

    <Accordion type="single" collapsible>

      <Accordion.Item value="item-1">…</Accordion.Item>

      <Accordion.Item value="item-2">…</Accordion.Item>

    </Accordion>

    Multiple items open at the same time

    Set the type prop to multiple to enable opening multiple items at once.

    <Accordion type="multiple">

      <Accordion.Item value="item-1">…</Accordion.Item>

      <Accordion.Item value="item-2">…</Accordion.Item>

    </Accordion>

    Accessibility

    Adheres to the Accordion WAI-ARIA design pattern.

    Source

    v2-look Accordion: theme background, padding, cursor, and hover/focus/press color styling on the unstyled @tamagui/ui Accordion Trigger and Content. The behavior keeps only the Collapsible trigger/content behavior. This is the exact source the registry ships — copy it into your app and the examples above import from your copy.

    components/tamagui/Accordion.tsx
    // Styled Accordion = the unstyled @tamagui/ui Accordion behavior + the default
// v2-look skin on its Trigger and Content (theme background, padding, cursor,
// and hover/focus/press color styling). The behavior frames keep only the
// Collapsible trigger/content behavior. Single skin definition; the shadcn
// registry item is generated from this file.
import { Accordion as UiAccordion } from '@tamagui/accordion'
import {
  createRefComponent,
  styled,
  type TamaguiElement,
  withStaticProperties,
} from '@tamagui/core'
import type * as React from 'react'

export const AccordionTrigger = styled(UiAccordion.Trigger, {
  displayName: 'AccordionTrigger',
  cursor: 'pointer',
  backgroundColor:
    'background hover:background-hover press:background-press focus:background-focus',
  padding: '4',
})

export const AccordionContent = styled(UiAccordion.Content, {
  displayName: 'AccordionContent',
  padding: '4',
  backgroundColor: 'background',
})

// see Dialog.tsx: withStaticProperties assigns in place, so composing onto
// UiAccordion would rewrite @tamagui/ui's own Accordion.Trigger/.Content for every
// consumer of the unstyled package.
const AccordionRoot = createRefComponent<
  TamaguiElement,
  React.ComponentProps<typeof UiAccordion>
>(function Accordion(props, ref) {
  return <UiAccordion {...props} ref={ref} />
})

export const Accordion = withStaticProperties(AccordionRoot, {
  Header: UiAccordion.Header,
  Item: UiAccordion.Item,
  HeightAnimator: UiAccordion.HeightAnimator,
  Trigger: AccordionTrigger,
  Content: AccordionContent,
})

    Dependencies

    yarn add @tamagui/accordion @tamagui/core

    Expects theme tokens: background, background-hover, background-focus, background-press.

    Need raw behavior without any skin? tamagui/unstyled re-exports the @tamagui/ui primitives (advanced).

    Previous

    ContextMenu

    Next

    AlertDialog

    Edit this page on GitHub.