# Layout (/docs/layout)



## Box [#box]

Box is the layout component. Use it to:

* Provide spacing to child elements.
* Impose sizing constraints on content.
* Control layout behaviour within flex and grid containers.
* Hide content responsively.

```tsx
import { Box } from '@luke-ui/react/box';

<Box maxInlineSize="42rem" padding="sp24">
	{children}
</Box>;
```

Use semantic HTML when no layout properties are needed. Box is a layout tool, not a replacement for
every element. Use `createSprinkles` from `@luke-ui/react/styles` when another application-owned
element needs the same responsive layout properties without wrapping it in a `Box`.

## Responsive values [#responsive-values]

Properties passed to `Box` and Sprinkles accept either a direct value or an object keyed by
breakpoint.

Responsive values resolve against the nearest ancestor size container. Luke UI uses the document
root as the fallback. Add `container-type: inline-size` to a nearer ancestor when descendants should
respond to that element instead.

Portalled content leaves containers around its trigger and resolves against the nearest size
container at its portal location, falling back to the root when there is none.

The root container measures its own content box, which can differ from the browser viewport width by
the width of a visible scrollbar. A breakpoint set exactly at the viewport width can miss by a few
pixels when a scrollbar is present.

| Breakpoint | Minimum container inline size |
| ---------- | ----------------------------- |
| `initial`  | 0px (base)                    |
| `bp640`    | 640px                         |
| `bp768`    | 768px                         |
| `bp1024`   | 1024px                        |
| `bp1280`   | 1280px                        |
| `bp1536`   | 1536px                        |

Each breakpoint is a fixed constant, not a theme token. A custom theme cannot change these sizes.
Every breakpoint is a minimum inline size, so there is no maximum size or range condition. A value
set at `bp640` also applies at `bp768` and above, unless a later breakpoint overrides it. Values
cascade up from `initial`, so specify only the points where the layout changes.

```tsx
<Box display="flex" flexDirection={{ initial: 'column', bp768: 'row' }}>
	{children}
</Box>
```

This example stacks the children by default, then places them in a row from `bp768`.

apps/docs/src/examples/box/responsive-layout.tsx

```tsx
import { Box } from '@luke-ui/react/box';
import { Text } from '@luke-ui/react/text';
import { vars } from '@luke-ui/react/theme';

export default () => {
	return (
		<Box display="flex" flexDirection={{ initial: 'column', bp768: 'row' }} gap="sp12">
			<Item />
			<Item />
		</Box>
	);
};

function Item() {
	return (
		<Box
			alignItems="center"
			display="flex"
			justifyContent="center"
			padding="sp16"
			style={{
				backgroundColor: vars.color.background.neutral.solid.rest,
				flex: 1,
				minBlockSize: '4rem',
			}}
		>
			<Text
				elementType="span"
				fontWeight="label"
				style={{ color: vars.color.foreground.neutral.onSolid }}
			>
				Item
			</Text>
		</Box>
	);
}
```

Set a responsive value when the layout needs a deliberate change. Prefer intrinsic wrapping when the
content can adapt without a breakpoint.

## Spacing and sizing [#spacing-and-sizing]

Padding, gap, and margin accept `0` plus value-based spacing keys such as `sp16` and `sp24`. Each
spacing key matches its pixel value, so `sp16` is 16px. Margin also accepts `auto`. Sizing and
grid-placement properties accept their CSS values.

Use logical properties such as `paddingInline`, `marginBlockStart`, and `maxInlineSize`. They work
in both writing directions without a second layout rule.

## Visual styles [#visual-styles]

The layout properties include theme-backed background, border colour, radius, and depth values, plus
fixed border width and style values. Typography and interaction states stay with a component API.
When a custom element that is not a Box needs a visual token, use `vars` from
`@luke-ui/react/theme`. Semantic values follow the active identity and colour mode, while Luke UI
defines its spacing scale and typography styles in source.

## Continue learning [#continue-learning]

<Cards>
  <Card href="/components/layout/box" title="Box">
    See the Box example, props, and custom div rendering contract.
  </Card>

  <Card href="/docs/styling" title="Styling">
    Learn where layout utilities sit beside components.
  </Card>
</Cards>