Layout@knitui/components
Container
Container is a centered, max-width content wrapper that mirrors Mantine's Container. size caps the max-width to a named breakpoint or an arbitrary value; fluid makes it span the full parent width, ignoring size. Centering is handled via automatic horizontal margins.
import { Container } from "@knitui/components";Playground
Loading playground…
<Container
size="md"
fluid={false}
/>Examples
Sizes
All named sizes rendered sequentially to show each max-width cap.
Loading example…
Fluid
Fluid mode — the container spans the full parent width regardless of size.
Loading example…
Numeric Size
A numeric size value sets an arbitrary max-width in pixels.
Loading example…
Page Layout
Realistic page layout — header, body copy and a footer inside a centered container.
Loading example…
Nested
Nested containers — an outer fluid wrapper with an inner size-capped container.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
disabled system | boolean | undefined | — | |
shadow system | "xs" | "sm" | "md" | "lg" | "xl" | "xxs" | "xxl" | undefined | — | |
size system | string | number | undefinedxxs · xs · sm · md · lg · xl · xxl | md | Caps the max-width to a named breakpoint. Also accepts a raw number or CSS string. |
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.