Layout

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.

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

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.

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.

<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.

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

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

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