Layout@knitui/components

Group

Group is a horizontal flex container that mirrors Mantine's Group. gap, align, justify, and wrap map Mantine names to flexbox style props. grow distributes available space equally across children; preventGrowOverflow (default true) caps each child to an equal fraction.

WebiOSAndroid2 own props7 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

gapSpace between children — a Tamagui spacing token.

alignCross-axis alignment (`alignItems`).

justifyMain-axis alignment (`justifyContent`).

wrapWhether children wrap to the next line.

growEach child grows to fill the row equally.

false

preventGrowOverflowCap each grown child to an equal fraction of the row width.

true

Playground

<Group
  gap="$md"
  align="center"
  justify="flex-start"
  wrap="wrap"
  grow={false}
  preventGrowOverflow
/>

Examples

Default

Default horizontal layout with the standard gap between items.

Loading example…

DefaultSource Storybook

Justify Variants

All justify values side by side — shows how main-axis alignment behaves.

Loading example…

Justify VariantsSource Storybook

Grow

grow makes every child share the row equally — useful for full-width button rows.

Loading example…

GrowSource Storybook

Mixed Content

Mixed content types — icons, text badges and buttons can share a Group row.

Loading example…

Mixed ContentSource Storybook

No Wrap

wrap="nowrap" keeps children on a single line even when space is tight.

Loading example…

No WrapSource Storybook

Gap Sizes

Different gap sizes — from tight $xs to spacious $xl.

Loading example…

Gap SizesSource Storybook

Props

Prop	Type	Default	Description
`disabled` system	`boolean \| undefined`	—
`grow`	`boolean \| undefined`	`false`	Each child grows to fill the row equally.
`preventGrowOverflow`	`boolean \| undefined`	`true`	Cap each grown child to an equal fraction of the row width.
`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 501 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.