Layout@knitui/components

Spacer

Spacer is a fixed-size invisible element that reserves space between other elements. Set w for horizontal gaps and h for vertical gaps. miw/mih default to w/h so the space never collapses.

WebiOSAndroid4 own props6 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

wWidth of the spacer from the $size scale (also sets `miw` by default).

hHeight of the spacer from the $size scale (also sets `mih` by default).

miwOverride the minimum width (defaults to `w`).

mihOverride the minimum height (defaults to `h`).

Playground

<Spacer
  w="$md"
  h="$md"
/>

Examples

Horizontal

Horizontal spacer — reserves a fixed amount of space between two inline elements.

Loading example…

HorizontalSource Storybook

Vertical

Vertical spacer — reserves a fixed amount of vertical space between stacked elements.

Loading example…

VerticalSource Storybook

Spacer Sizes

Multiple spacer sizes using Tamagui $size tokens — shows how spacing scales across a row.

Loading example…

Spacer SizesSource Storybook

Flex Grow

Flex-grow layout — Spacer with flex={1} expands to fill available space, pushing siblings apart.

Loading example…

Flex GrowSource Storybook

Minimum Size

Minimum size guarantee — the spacer resists collapsing even inside a flex container that tries to shrink it.

Loading example…

Minimum SizeSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	—
`h`	`number \| Animated.AnimatedNode \| GetThemeValueForKey<"height"> \| null \| undefined` $xxs · $xs · $sm · $md · $lg · $xl · $xxl	`$md`	Height of the spacer from the $size scale (also sets `mih` by default).
`mih`	`number \| Animated.AnimatedNode \| GetThemeValueForKey<"minHeight"> \| null \| undefined` unset · $xxs · $xs · $sm · $md · $lg · $xl · $xxl	—	Override the minimum height (defaults to `h`).
`miw`	`number \| Animated.AnimatedNode \| GetThemeValueForKey<"minWidth"> \| null \| undefined` unset · $xxs · $xs · $sm · $md · $lg · $xl · $xxl	—	Override the minimum width (defaults to `w`).
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`w`	`number \| Animated.AnimatedNode \| GetThemeValueForKey<"width"> \| null \| undefined` $xxs · $xs · $sm · $md · $lg · $xl · $xxl	`$md`	Width of the spacer from the $size scale (also sets `miw` by default).

Accessibility & DOM props (2)

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

Plus 494 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.