Layout

Choose a layout component

Box

Box is the general layout element. 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. createSprinkles passes through its own enumerable string-keyed non-utility props and replaces any input className or style with the generated values.

Responsive values

Properties passed to Box and Sprinkles accept either a direct value or an object keyed by breakpoint. Layout utility props exposed by layout components accept the same responsive form.

Responsive values resolve against the nearest ancestor size container. Luke UI uses the document root as the fallback. Use Container when descendants should respond to a nearer content area. Component-responsive styles always query an ancestor. They do not query the component itself.

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.

Import breakpoints from @luke-ui/react/styles when you author @container queries against the same thresholds Luke UI responsive props use.

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. The number in each key reflects its value at the default 16px root and is emitted as rem. 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