nori-ui — React Native + Web components

Vertically stacked, individually expandable sections with full keyboard nav and shared-value content/trigger pairing.

5.0 kBgzipped

At a glance

Compose Accordion, AccordionItem, AccordionTrigger, AccordionContent. Each item's value pairs the trigger with its content.
Two modes:
- type="single" — at most one item open. Pass collapsible to allow closing the open item.
- type="multiple" — any combination open. value and defaultValue are arrays.
Controlled (value + onChange) or uncontrolled (defaultValue).
Keyboard nav on triggers:
- Arrow Down / Arrow Up → move focus between triggers (wraps)
- Home / End → first / last
- Enter / Space → toggle the focused item
ARIA: triggers render as real <button>s with aria-expanded and aria-controls. Content panels expose role="region" and aria-labelledby pointing at the trigger.
Cross-platform: works on React Native and react-native-web. The chevron rotates 180° on open via a CSS transition on web; on native it snaps.

Direction:

ltrrtl

Direction:

ltrrtl

type is required and discriminates the value shape:

type="single" → value?: string | null, defaultValue?: string, onChange?: (next: string | null) => void, collapsible?: boolean.
type="multiple" → value?: string[], defaultValue?: string[], onChange?: (next: string[]) => void.

Prop	Type	Default	Description
`type`*	`enum`	—	One-at-a-time mode. Any combination open.
`className`	`string`	—	—
`collapsible`	`boolean`	—	Allow closing the open item by clicking it again. No-op in `multiple` mode (items are always individually collapsible). @defaultValue false
`defaultValue`	`string \| string[]`	—	Uncontrolled initial open value. Uncontrolled initial list of open values.
`onChange`	`((next: string \| null) => void) \| ((next: string[]) => void)`	—	Fires when the open value changes. Receives the new value (string), or `null` if collapsed. Fires when the open list changes. Receives the new list.
`testID`	`string`	—	—
`value`	`string \| string[] \| null`	—	Controlled open value. Pass `null` (with `collapsible`) for "nothing open". Controlled list of open values.

Prop	Type	Default	Description
`value`*	`string`	—	Stable identifier — links the item to `value` / `defaultValue` on the parent.
`className`	`string`	—	—
`disabled`	`boolean`	`false`	Disable expansion of this item. The trigger remains focusable for nav consistency.
`testID`	`string`	—	—

Prop	Type	Default	Description
`className`	`string`	—	—
`testID`	`string`	—	—

Prop	Type	Default	Description
`className`	`string`	—	—
`forceMount`	`boolean`	`false`	Keep the content mounted even when collapsed. Useful for forms that shouldn't lose state, or content that's expensive to mount. @defaultValue false
`testID`	`string`	—	—