Layout@knitui/components
Box
Box is the single base primitive the component kit composes from. It is a thin styled() over the Tamagui View exposed by @knitui/core, giving every Tamagui feature: token style props, theming, hover/press states, animations, and cross-platform output. All other components are built with styled(Box, { ... }).
import { Box } from "@knitui/components";Playground
Loading playground…
<Box
padding="$md"
backgroundColor="$background"
/>Examples
Flex Row
Box as a flex row container — the foundation for horizontal layouts.
Loading example…
Flex Column
Box as a flex column container — stack children vertically with a gap.
Loading example…
Spacing Tokens
Spacing tokens applied as padding and margin — $xs through $xl.
Loading example…
Themed Surfaces
Theme token for background and border — Box picks up the active theme palette.
Loading example…
Nested
Nested Box elements — demonstrates natural composition and depth.
Loading example…
Shadows
Elevation via the shared shadow ladder — Box is the source of the shadow prop every other component inherits; no shadow unless set.
Loading example…
Opacity
Reduced opacity — Box supports the opacity prop directly.
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 498 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.