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.
import { Collapse } from "@knitui/components";Playground
Loading 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…
Default Expanded
Starts fully expanded — no transition required on initial render.
Loading example…
Default Collapsed
Starts fully collapsed — content is unmounted (default keepMounted=false).
Loading example…
Shadows
The inherited shadow elevation ladder — each region rendered open, from xs to xl.
Loading example…
Keep Mounted
keepMounted keeps the DOM node alive while collapsed; the region is aria-hidden.
Loading example…
Horizontal Orientation
Collapses along the horizontal (width) axis instead of the default vertical.
Loading example…
No Opacity Animation
Opacity animation disabled — only the size transitions, content stays fully opaque.
Loading example…
Styles
Per-slot styles targets individual parts — here the root clip box and content wrapper.
Loading example…
Multiple Regions
Multiple independently-controlled collapse regions in a stack.
Loading example…
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 | undefinedvertical · 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 | undefinedease · 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 | Targets |
|---|---|
content | Props for the inner measured content wrapper (.Content). |
root | Props for the outer animated clip box (.Frame). |
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.