Layout
One block per primitive from docs/components/Layout/: a props table (from the docs) and a live example. Full prose lives under header Documentation → Layout.
Box
Props (docs/components/Layout/Box.md)
| Prop | Type | Default | Description |
|---|---|---|---|
as | BoxAsProp | `div` | Host tag; for `a`, `button`, `label`, etc. — typed attributes. |
SpacingProps | see type | — | w, h, minW, maxW, p, m, gap, display, flex*, grid*, position, backgroundColor, borderRadius, etc. |
…DOM | HTML attrs | — | Other native props (`id`, `aria-*`, `onClick`, `href` for `as="a"`) pass through to the element. |
Section
Polymorphic Box as a section shell plus typography from the theme.
Container
| Prop | Type | Default | Description |
|---|---|---|---|
maxW | preset | number | string | `lg` | sm | md | lg | xl | 2xl | full or a length. |
center | boolean | `true` | Horizontal centering via margin auto. |
padding | number | string | — | Shorthand padding for the container. |
+ Box | SpacingProps | — | height / h; otherwise same as Box. |
Narrow column (maxW: sm), padding via px / py and secondary text color from tokens.
Stack, HStack, VStack
| Prop | Type | Default | Description |
|---|---|---|---|
direction | row | column | … | `row` | For Stack — flex-direction. |
align | align-items | `center` (`stretch` on VStack) | Cross axis. |
justify | justify-content | `flex-start` | Main axis. |
wrap | nowrap | wrap | … | `nowrap` | Flex line wrapping. |
reverse | boolean | `false` | HStack / VStack only — switches to *-reverse. |
+ Box | SpacingProps | — | gap, p, w, and other Box props. |
HStack / VStack share the same props; VStack defaults to align="stretch".
Left
Right
First in DOM
Second in DOM
Flex
| Prop | Type | Default | Description |
|---|---|---|---|
direction | FlexDirection | `row` | Main axis direction. |
wrap | FlexWrap | `nowrap` | flex-wrap. |
justify | FlexJustify | `flex-start` | justify-content. |
align | FlexAlign | `stretch` | align-items. |
alignContent | FlexAlignContent | `stretch` | Alignment when there are multiple flex lines. |
gap | number | string | — | Gap between items. |
grow / shrink / basis | number | string | — | Shorthands for flex-grow / shrink / basis. |
reverse | boolean | `false` | Reverse direction. |
+ Box | SpacingProps | — | No display/flexDirection from Box (Flex sets those). |
A
B
C
Grid
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | string | — | Number → repeat(n, 1fr); otherwise a CSS track list string. |
rows | number | string | — | Same idea for rows. |
gap / rowGap / columnGap | number | string | — | Grid gutters. |
areas | string[] | — | grid-template-areas. |
justifyItems / alignItems | … | `stretch` | Cell alignment. |
justifyContent / alignContent | … | `start` / `stretch` | Grid tracks within the container. |
autoFlow / autoColumns / autoRows | string | — | Implicit grid placement. |
template | { columns?, rows?, areas? } | — | Takes precedence over separate columns/rows/areas. |
+ Box | SpacingProps | — | w, h, padding, layout — same as Box. |
Cell 1
Cell 2
Center
| Prop | Type | Default | Description |
|---|---|---|---|
horizontal | boolean | `true` | Center on the horizontal axis. |
vertical | boolean | `true` | Center on the vertical axis. |
center | boolean | `true` | If true — both axes. |
inline | boolean | `false` | inline-flex. |
width / height | number | string | — | Aliases; prefer w / h. |
+ LayoutBoxProps | SpacingProps | — | gap, padding, background, etc. |
Centered on both axes
Flex + Center
Composition pattern: Flex defines the region; Center centers its child.
Centered
Separator
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | `horizontal` | Line direction. |
size | number | string | `1` | Thickness (number → px). |
color | string | `gray.200` | Line fill (background-color). |
margin | number | string | — | Outer margin. |
+ Box | SpacingProps | — | Excludes spacing color as text color. |
Section A
Section B
LeftRight
Bleed
| Prop | Type | Default | Description |
|---|---|---|---|
all | number | string | — | Negative margin on all sides. |
horizontal / vertical | number | string | — | Two-axis shorthands. |
top / right / bottom / left | number | string | — | Per side; overrides axis/all when both apply. |
width / height | number | string | — | Aliases for w / h. |
+ Box | SpacingProps | — | Remaining Box props. |
Text respects parent padding
Content breaks out with negative horizontal margins
AspectRatio
| Prop | Type | Default | Description |
|---|---|---|---|
ratio | number | `16/9` | Width ÷ height. |
maxW / maxH | number | string | — | Via Box. |
objectFit | CSS object-fit | `cover` | When there is a single DOM child element. |
+ Box | SpacingProps | — | padding, borderRadius, etc. |
16:9
VisuallyHidden
| Prop | Type | Default | Description |
|---|---|---|---|
showOnFocus | boolean | `false` | `span` for skip links; visibility via :focus in CSS. |
+ HTML attrs | HTMLAttributes | — | className, id, aria-*, data-*. |
The “Open menu” label is exposed to screen readers and visually hidden.
Sticky
| Prop | Type | Default | Description |
|---|---|---|---|
top | number | string | `0` | Offset when stuck; used in rootMargin for the observer. |
bottom / left / right | number | string | — | Position in fixed state. |
zIndex | number | `1000` | Layer while sticky. |
enabled | boolean | `true` | Disable observer and sticking. |
shadow | string | — | box-shadow while sticky. |
+ HTML attrs | HTMLAttributes | — | className, style on the wrapper (not Box). |
Scroll the region — this bar sticks
Content row 1
Content row 2
Content row 3
Content row 4
Content row 5
Content row 6
Content row 7
Content row 8
Content row 9
Content row 10