Layout@knitui/components
Flex
Flex is a flexbox layout primitive that mirrors Mantine's Flex. It exposes named flex props (align, justify, wrap, direction) as well as gap, rowGap, and columnGap inherited from Box.
import { Flex } from "@knitui/components";Playground
Loading playground…
<Flex
direction="row"
align="flex-start"
justify="flex-start"
wrap="nowrap"
gap="$md"
/>Examples
Directions
All four direction values — row, row-reverse, column, column-reverse.
Loading example…
Alignment
The align prop controls cross-axis alignment; shown in a fixed-height container.
Loading example…
Justification
The justify prop distributes items along the main axis.
Loading example…
Wrapping
wrap="wrap" allows items to flow onto multiple lines when space is tight.
Loading example…
Gap Tokens
gap, rowGap, and columnGap use Tamagui spacing tokens.
Loading example…
Composed Layout
Flex composes naturally with Box children of varying sizes for real-world layouts.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
direction | FlexDirection | undefinedrow · row-reverse · column · column-reverse | row | Main-axis direction (maps to `flexDirection`). |
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.