Overlays@knitui/components

Collapse

Collapse animates a content region between a zero-size collapsed state and its natural expanded size. The expanded prop (or its legacy aliases in / opened) drives the transition. orientation flips the axis, animateOpacity cross-fades alongside, and keepMounted opts-in to keeping DOM nodes alive while collapsed.

WebiOSAndroid2 style slots11 own props10 examples

Stories Source Tests Open in Storybook

import { Collapse } from "@knitui/components";

Playground

Loading playground…

expandedExpanded state — drives the open/close transition.

true

orientationCollapse axis — vertical (height) or horizontal (width).

transitionDurationTransition duration in milliseconds.

transitionTimingFunctionCSS timing function — 'linear' maps to the stripe preset, a cubic-bezier to bouncy.

animateOpacityCross-fade opacity alongside the size transition.

true

keepMountedKeep content mounted in the DOM while collapsed (useful for SEO / focus management).

false

Playground

<Collapse
  expanded
  orientation="vertical"
  transitionDuration={200}
  transitionTimingFunction="ease"
  animateOpacity
  keepMounted={false}
/>

Examples

Controlled

Toggle the panel open and closed with a button — demonstrates controlled usage.

Loading example…

ControlledSource Storybook

Default Expanded

Starts fully expanded — no transition required on initial render.

Loading example…

Default ExpandedSource Storybook

Default Collapsed

Starts fully collapsed — content is unmounted (default keepMounted=false).

Loading example…

Default CollapsedSource Storybook

Shadows

The inherited shadow elevation ladder — each region rendered open, from xs to xl.

Loading example…

ShadowsSource Storybook

Keep Mounted

keepMounted keeps the DOM node alive while collapsed; the region is aria-hidden.

Loading example…

Keep MountedSource Storybook

Horizontal Orientation

Collapses along the horizontal (width) axis instead of the default vertical.

Loading example…

Horizontal OrientationSource Storybook

No Opacity Animation

Opacity animation disabled — only the size transitions, content stays fully opaque.

Loading example…

No Opacity AnimationSource Storybook

Styles

Per-slot styles targets individual parts — here the root clip box and content wrapper.

Loading example…

StylesSource Storybook

Multiple Regions

Multiple independently-controlled collapse regions in a stack.

Loading example…

Multiple RegionsSource Storybook

Props

Prop	Type	Default	Description
`animateOpacity`	`boolean \| undefined`	`true`	Cross-fade opacity alongside the size transition.
`children`	`ReactNode`	—	Collapsible content.
`disabled` system	`boolean \| undefined`	—
`expanded`	`boolean \| undefined`	`true`	Expanded state — drives the open/close transition.
`in`	`boolean \| undefined`	—	Expanded state. Legacy alias of {@link CollapseProps.expanded}.
`keepMounted`	`boolean \| undefined`	`false`	Keep content mounted in the DOM while collapsed (useful for SEO / focus management).
`onTransitionEnd`	`(() => void) \| undefined`	—	Called when the transition ends.
`onTransitionStart`	`(() => void) \| undefined`	—	Called when the transition starts.
`opened`	`boolean \| undefined`	—	Alias of {@link CollapseProps.in} matching older Mantine.
`orientation`	`CollapseOrientation \| undefined` vertical · horizontal	`'vertical'`	Collapse axis — vertical (height) or horizontal (width).
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`styles` system	`SlotStyles<CollapseStyles> \| undefined`	—	Uniform per-slot style passthrough — sugar over the composable parts. Slots: `root` / `content`. Explicit inline props win.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`transitionDuration`	`number \| undefined`	`200`	Transition duration in milliseconds.
`transitionTimingFunction`	`string \| undefined` ease · linear · ease-in · ease-out · cubic-bezier(0.34,1.56,0.64,1)	`'ease'`	CSS timing function — 'linear' maps to the stripe preset, a cubic-bezier to bouncy.

Style slots

Every part of Collapse can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`content`	`styles={{ content: { … } }}`
`root`	`styles={{ root: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 497 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.