Accordion

Single-value controlled/uncontrolled disclosure group where one item expands at a time.

Identity

Category: Navigation & disclosure
Status: stable public Registry/export-map component family
Targets: iOS · Android · Web, subject to the compatibility contract
Prerequisites: @beemvp/beeui-ui installed (or this component’s source copied via the Registry CLI below) and, on Web, the BeeUI Tailwind/Uniwind theme CSS loaded — see Start for full platform setup.
Source: packages/ui/src/components/accordion.tsx

Import

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@beemvp/beeui-ui';

There is no documented deep/private source import. For source ownership from a BeeUI checkout:

pnpm beeui add accordion

Registry (used throughout this page) is BeeUI’s source-ownership manifest — registry/registry.json — that the pnpm beeui/@beemvp/beeui-cli CLI reads to copy a component’s real source into your app and rewrite its internal imports; it is not an npm package index. This component’s own Registry entry: registry/registry.json.

Composition and public API

Family exports: Accordion AccordionContent AccordionItem AccordionTrigger
- Also routed here, outside the Registry family:
  - accordion
- Package export subpath: @beemvp/beeui-ui/accordion

Exported types: AccordionContentProps, AccordionItemProps, AccordionProps, AccordionTriggerProps

The generated API inventory is mechanically joined to packages/ui/src/index.ts, Registry metadata, and the component reference contract. Each type’s field table below is parsed directly from that source, not a second hand-maintained copy; for the fuller behavior narrative see the canonical component behavior catalog.

State and behavior contract

Single-value controlled (value/onValueChange) or uncontrolled (defaultValue) disclosure coordination shared by every AccordionItem; a disabled item’s trigger stays non-interactive and cannot expand, and only the active item’s AccordionContent mounts.

Props

`AccordionContentProps`

Prop	Type	Default	Description
`className`	`string`	—	Extra utility classes, merged after the component’s own via `cn(...)`, so they win on conflict. An escape hatch for source-owned and application work, not a cross-engine portability guarantee.

Also carries every prop of Omit<ViewProps, 'role'> — that upstream contract is not reproduced here.

`AccordionItemProps`

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content rendered inside this element. The family’s composition section states which children it expects.
`className`	`string`	—	Extra utility classes, merged after the component’s own via `cn(...)`, so they win on conflict. An escape hatch for source-owned and application work, not a cross-engine portability guarantee.
`value` (required)	`string`	—	Identifies this item; matched against the parent `Accordion`’s `value` to determine whether it is open.

Also carries every prop of Omit<ViewProps, 'children'> — that upstream contract is not reproduced here.

`AccordionProps`

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content rendered inside this element. The family’s composition section states which children it expects.
`className`	`string`	—	Extra utility classes, merged after the component’s own via `cn(...)`, so they win on conflict. An escape hatch for source-owned and application work, not a cross-engine portability guarantee.
`collapsible`	`boolean`	`true`	When true, pressing the open item’s trigger again closes it, leaving no item open. Defaults to true.
`defaultValue`	`string \| null`	`null`	Sets the initially open item’s value for uncontrolled usage. Defaults to null (all items closed).
`disabled`	`boolean`	`false`	Prevents any item from opening or closing, including via `AccordionTrigger` presses. Defaults to false.
`onValueChange`	`(value: string \| null) => void`	—	Called with the newly open item’s value (or null when it closes) whenever the open item changes.
`value`	`string \| null`	—	The value of the currently open `AccordionItem`. Passing this switches the accordion to controlled mode.

Also carries every prop of Omit<ViewProps, 'children'> — that upstream contract is not reproduced here.

`AccordionTriggerProps`

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content rendered inside this element. The family’s composition section states which children it expects.
`className`	`string`	—	Extra utility classes, merged after the component’s own via `cn(...)`, so they win on conflict. An escape hatch for source-owned and application work, not a cross-engine portability guarantee.
`disabled`	`boolean`	`false`	Disables presses on this trigger only, without affecting other items in the accordion.
`labelClassName`	`string`	—	Extra utility classes for the label text specifically, merged after the component’s own.

Also carries every prop of Omit<PressableProps, 'accessibilityRole' | 'accessibilityState' | 'children' | 'disabled' | 'role'> — that upstream contract is not reproduced here.

The executable fixtures below are the source-grounded usage examples; consumers should not infer state ownership from DOM structure or another UI library.

Provider and dependencies

No additional provider is required by this family. BeeUIProvider remains the recommended application root.
Peer/native dependencies visible to this Registry item: react, react-native
Registry dependency closure: core-cn, text, theme
Safe-area ownership remains explicit: shell surfaces touching system edges opt into SafeArea; components do not silently invent app-shell insets.
Web consumers load the BeeUI semantic theme CSS as documented in Web onboarding.

Platform behavior

This family ships no platform-specific file, and its own source takes no Platform branch.

The same public family is exposed across the supported target matrix; meaningful platform differences remain governed by the compatibility contract.

Evidence classes are not equal and this page does not blur them: Web behavior is exercised in a real browser, while iOS and Android carry package/export and native-compile evidence, which is not device-runtime proof. The compatibility contract records which class each claim rests on.

Accessibility

Roles this family assigns: button, region — set in accordion.tsx by the components themselves, not by the caller.
Accessibility states and properties it sets: accessibilityLabel, disabled, expanded — read from accordion.tsx.

Keyboard/focus behavior, announcements, Dynamic Type/Web zoom, RTL and reduced-motion expectations are not derived here — see Accessibility overview, Keyboard & focus, RTL/localization and Large text & zoom. BeeUI does not claim universal accessibility certification from automated tests.

Styling and theming

Style axes: none of its own — its appearance comes from tokens and your own classes; it also carries Omit<PressableProps, 'accessibilityRole' | 'accessibilityState' | 'children' | 'disabled' | 'role'>, Omit<ViewProps, 'children'>, Omit<ViewProps, 'role'>.
Class-name surfaces: className, labelClassName.

Colors, spacing and typography come from semantic tokens rather than from values written here — see Theming and Density. A className is an escape hatch for source-owned and application work, not a cross-engine portability guarantee.

Executable examples

Primary executable fixture: apps/showcase/__tests__/accordion-collapsible-aria-expanded.test.tsx
Additional fixture: apps/showcase/__tests__/component-contracts.test.tsx
Additional fixture: apps/showcase/component-gallery/component-gallery.tsx

Addressable examples

Each link below opens the Showcase at that exact example, not at the top of the gallery:

basic — smallest meaningful complete usage
states — the states example

The Showcase links demonstrate Web behavior; use the native-preview guide for real simulator/emulator/device paths.

Live Web preview

This frame loads the real BeeUI Web Showcase on demand; it is not a second docs-only implementation. It proves browser behavior only. Use native preview for iOS/Android simulator, emulator or device paths.

Composition anatomy

Family root / primary export: Accordion
- Public composition parts / helpers:
  - AccordionContent
  - AccordionItem
  - AccordionTrigger
- Exported type surface:
  - AccordionContentProps
  - AccordionItemProps
  - AccordionProps
  - AccordionTriggerProps

The tree above is ordinary document structure so it remains readable with keyboard and assistive technology; it is derived from the real public export family rather than a canvas-only diagram.

Verified example source

These are the parts of the typechecked runtime Showcase fixture behind this live preview — apps/showcase/component-gallery/component-gallery.tsx, 1103 lines — where Accordion is actually used: 14 lines in 1 place. Each block is copied verbatim from the line range named above it, so it is the same executable source, not a retelling of it. The rest of that file exercises other families and is not reproduced here.

Imports the examples below need (a filtered subset of the fixture’s own top-level imports):

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Text } from '@beemvp/beeui-ui';

lines 964–977:

              <Accordion defaultValue="account">
                <AccordionItem value="account">
                  <AccordionTrigger>Account</AccordionTrigger>
                  <AccordionContent>
                    <Text tone="muted">Account preferences and identity.</Text>
                  </AccordionContent>
                </AccordionItem>
                <AccordionItem value="billing">
                  <AccordionTrigger>Billing</AccordionTrigger>
                  <AccordionContent>
                    <Text tone="muted">Invoices and payment settings.</Text>
                  </AccordionContent>
                </AccordionItem>
              </Accordion>

Open the fixture itself for the full surrounding component. For a smaller app-specific example, start from the imports and fixture-state blocks above and keep only the state your screen owns.

Limitations

AccordionTrigger and AccordionContent throw when rendered outside Accordion/AccordionItem rather than degrading, so the parts cannot be lifted out of the family’s own tree; and because a closed item’s content is unmounted rather than hidden, any state its children hold is discarded on every collapse.

Implementation note: Coming from shadcn/ui: this Accordion does not accept a type="single" | "multiple" prop. BeeUI models the single-expand behavior this family implements as the only mode — pass value/onValueChange (or defaultValue) the same way you would for shadcn’s type="single". Multi-expand (type="multiple") is not implemented; compose independent Collapsible instances instead if every item must be able to stay open simultaneously.