Layouts
Box
Base box component.
I am a box.
With properties
I am a box.
Component props
| Name | Type |
|---|---|
| display | Responsive<"block" | "inline-block" | "none"> |
| position | Responsive<"static" | "relative" | "absolute" | "fixed" | "sticky"> |
| backgroundColor | string |
| borderSize | Responsive<"1" | "2" | "3" | "4"> |
| borderRadius | Responsive<"1" | "2" | "3" | "4" | "5" | "6"> |
| padding | Responsive<Spacing> |
| paddingX | Responsive<Spacing> |
| paddingY | Responsive<Spacing> |
| paddingTop | Responsive<Spacing> |
| paddingRight | Responsive<Spacing> |
| paddingBottom | Responsive<Spacing> |
| paddingLeft | Responsive<Spacing> |
| margin | Responsive<Spacing> |
| marginX | Responsive<Spacing> |
| marginY | Responsive<Spacing> |
| marginTop | Responsive<Spacing> |
| marginRight | Responsive<Spacing> |
| marginBottom | Responsive<Spacing> |
| marginLeft | Responsive<Spacing> |
| width | Responsive<string> |
| minWidth | Responsive<string> |
| maxWidth | Responsive<string> |
| height | Responsive<string> |
| minHeight | Responsive<string> |
| maxHeight | Responsive<string> |
| flexBasis | Responsive<string> |
| flexGrow | Responsive<string> |
| flexShrink | Responsive<string> |
| gridRow | Responsive<string> |
| gridColumn | Responsive<string> |
| order | Responsive<number> |
| as | string |
| asChild | boolean |