Layout@knitui/components
Stack
Stack is a vertical flex column built on Box. It mirrors Mantine's Stack: gap takes a Tamagui space token, align maps to alignItems, and justify maps to justifyContent.
import { Stack } from "@knitui/components";Playground
Loading playground…
<Stack
gap="$md"
align="stretch"
justify="flex-start"
/>Examples
Align Variants
Every align value side by side so cross-axis alignment differences are visible.
Loading example…
Justify Variants
Every justify value in a fixed-height container so main-axis distribution is visible.
Loading example…
Gap Sizes
Gap tokens from xxs to xxl — spacing between children grows with each step.
Loading example…
Centered
Centred layout — both align and justify set to "center" for a vertically and horizontally centred card-like pattern.
Loading example…
Nested
Deeply nested Stacks illustrate how gap and alignment compose across levels.
Loading example…
Form Layout
A realistic form layout — stacked labels and inputs with a consistent gap.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled system | boolean | undefined | — | |
shadow system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | |
theme system | ThemeName | null | undefined | — | Applies a theme to this element |
Accessibility & DOM props (2)
| Prop | Type |
|---|---|
key | Key | null | undefined |
ref | Ref<TamaguiElement> | undefined |
Plus 500 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.