# Box (/components/layout/box)
`Box` accepts Luke UI layout properties and renders a `div` by default. It places content in a
layout, adds token spacing, constrains an element's size, or controls a flex or grid child. Use a
normal `div` when no supported layout property applies.
apps/docs/src/examples/box/basic.tsx
```tsx
import { Box } from '@luke-ui/react/box';
export default () => {
return (
First
Second
);
};
```
## Layout properties [#layout-properties]
Box supports display, logical margin and padding, inline and block sizing, positioning, overflow,
gap, flex, and grid-child properties. It does not set grid container properties. Keep grid-template
rules in the application CSS or a component that owns that layout.
```tsx
{children}
```
## Responsive values [#responsive-values]
Pass a direct value when it does not change. Use an object keyed by breakpoint when it does. Read
[Layout](/docs/layout#responsive-values) for the breakpoint list, the cascade from `initial`, and a
worked example.
## Spacing values [#spacing-values]
Padding, gap, and margin accept value-based spacing keys. Read
[Layout](/docs/layout#spacing-and-sizing) for the full scale and for logical property names.
## Choose the rendered element [#choose-the-rendered-element]
Set `elementType` when the layout needs a supported structural element. The prop does not change
Box's accepted DOM props. Box owns the element and its DOM attributes.
The supported elements are `article`, `aside`, `dd`, `div`, `dl`, `dt`, `figcaption`, `figure`,
`footer`, `header`, `li`, `main`, `nav`, `ol`, `section`, `span`, and `ul`.
apps/docs/src/examples/box/semantic-element.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Heading } from '@luke-ui/react/heading';
import { Text } from '@luke-ui/react/text';
export default () => {
return (
Account settings
Manage your profile and sign-in details.
);
};
```
## Own the rendered element [#own-the-rendered-element]
Use `render` when the callback must own the element and its DOM attributes. The callback can return
an appropriate intrinsic element or custom component. It receives resolved `children`, `className`,
and `style` props, plus a callback `ref`.
Put event, accessibility, and element-specific attributes on the element inside the callback.
Do not combine `render` with `elementType`. Use `Link` or `Button` when you need their behaviour.
apps/docs/src/examples/box/render-element.tsx
```tsx
import { Box } from '@luke-ui/react/box';
export default () => {
return (
This content is revealed when the details element is expanded.
);
};
```
Read [Composition](/docs/composition#render-a-different-dom-component) for the general `elementType`
and `render` rule.
## Visual styles [#visual-styles]
Box accepts theme-backed background, border colour, radius, and depth values, plus fixed border
width and style values. Use a component API for interaction states and typography. When a custom
element that is not a Box needs a colour, radius, or depth value, use `vars` from
`@luke-ui/react/theme`. Read [Styling](/docs/styling#use-semantic-variables-for-custom-ui) for when
to reach for `vars`, and the [token reference](/docs/token-reference) for the contract.
apps/docs/src/examples/box/visual-styles.tsx
```tsx
import { Box } from '@luke-ui/react/box';
import { Text } from '@luke-ui/react/text';
export default () => {
return (
Card heading
Background, border, radius, and depth values applied together.
);
};
```
## API [#api]