Layout@knitui/components

Center

Center aligns its children on both the horizontal and vertical axes. It is a thin styled wrapper around Box that sets alignItems and justifyContent to center. The inline variant switches the display to inline-flex so it can sit inline with surrounding text.

WebiOSAndroid0 own props6 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

inlineWhen true the container uses `inline-flex` instead of `flex`.

false

Playground

<Center
  inline={false}
  width="$xxl"
  height="$xxl"
  backgroundColor="$color3"
  borderRadius="$md"
>
  <Text>Center</Text>
</Center>

Examples

Default

Default block centering — content is centered on both axes inside a fixed container.

Loading example…

DefaultSource Storybook

Inline

Inline variant — the container shrinks to content width and sits inline with surrounding text.

Loading example…

InlineSource Storybook

Nested Children

Centering nested element children — any React node is centered correctly.

Loading example…

Nested ChildrenSource Storybook

Multiple Containers

Multiple Center containers side by side — each cell centers its own content.

Loading example…

Multiple ContainersSource Storybook

Full Width

Full-width centering pattern — stretch to the parent and center a card inside.

Loading example…

Full WidthSource Storybook

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 499 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.