Primitives
Box
A surface with tone, padding, radius, border and flex facts
Tones
Facts
Usage
import { Box, Text } from "@gpuixui/primitives";
<Box tone="card" padding="md" radius="md" border>
<Text role="body">A surface with the card role.</Text>
</Box>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
tone | SurfaceTone | required | the semantic background |
padding | spacing step | none | padding on all four sides |
paddingX / paddingY | spacing step | none | per-axis padding, overriding padding there |
radius | none | sm | md | lg | xl | full | none | corner radius; a stored name this release does not carry paints no corner |
border | boolean | false | one thin border on the border role |
borderStyle | "solid" | "dashed" | "solid" | the edge style; no effect without border |
aspectRatio | number | none | width ÷ height; a non-finite, zero or negative ratio is dropped |
elevation | sm | md | lg | overlay | none | the theme's shadow at that level; a stored level name this release does not carry paints md, the default lift, and the reserved overlay paints none |
grow / shrink | boolean | false | flex growth, or allow shrinking below content |
fullWidth / fullHeight | boolean | false | 100% on that axis |
ref | Ref<PublicInstance> | — | the painted element, for a measurement, a scroll or a focus call |
aria-id | string | — | the element's author id, exposed as the platform's automation id |
onLayout | (event: EventPayload) => void | — | the painted box after the first paint and each resize |
className | string | — | a Tailwind class string, joined after the recipe so it wins conflicts |
style | StyleDesc | — | merged last, so it wins property by property |
children | ReactNode | — | content |
testId | string | — | stable locator |
Edit this page on GitHubpackages/primitives/docs/box.mdx