Layout@knitui/components
AspectRatio
AspectRatio constrains its content to a fixed width-to-height ratio. The ratio prop accepts a number (width / height) — e.g. 16 / 9 for widescreen. The box fills available width and derives its height accordingly. Child overflow is clipped.
import { AspectRatio } from "@knitui/components";Playground
Loading playground…
<AspectRatio
ratio={1.7777777777777777}
>
<Box flex={1} backgroundColor="$color5" alignItems="center" justifyContent="center">
<Text>16 / 9</Text>
</Box>
</AspectRatio>Examples
Square
Square ratio (1 : 1) — the default when no ratio is provided.
Loading example…
Widescreen
Classic 16 : 9 widescreen ratio, typical for video embeds.
Loading example…
Portrait
Portrait 9 : 16 ratio, suitable for vertical media.
Loading example…
Common Ratios
Common ratios side by side for visual comparison.
Loading example…
Inside Flex Row
Inside a flex row — alignSelf: "stretch" fills the row's height and derives the width from the ratio, so the box keeps its proportions next to a flex sibling instead of forcing 100% width.
Loading example…
Overflow Clipped
Overflow clipping — the inner content is larger than the container and gets clipped.
Loading example…
With Image Placeholder
Renders an image-like placeholder scaled inside the ratio box.
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 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.