> ## Documentation Index
> Fetch the complete documentation index at: https://docs.napps.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Box

`box` is a general-purpose container. Its children can overlap; the last rendered child is drawn
on top.

## Properties

| Property   | Accepted value     | Description                               |
| ---------- | ------------------ | ----------------------------------------- |
| `style`    | `StyleProperties`  | Layout, appearance, and transform values. |
| `children` | `ReactNode`        | Child nodes rendered in order.            |
| `key`      | `string \| number` | React key for dynamic children.           |
| `class`    | `string`           | Registered style name for this node only. |

`box` has no node-specific properties.

`horizontalAlignment` and `verticalAlignment` on the style align every child inside the same box.
Children stay stacked, and later children render on top. See [How layout alignment works](/js-ui/react/styling#how-layout-alignment-works).

## Example

```tsx theme={null}
<box
  style={{
    width: 160,
    height: 96,
    borderRadius: 12,
    backgroundColor: "#e0e7ff"
  }}
>
  <img
    src="https://cdn.example.com/product.jpg"
    style={{ width: "100%", height: "100%" }}
    resizeMode="cover"
    alt="Product"
  />
  <text
    style={{
      padding: 8,
      color: "#ffffff",
      fontWeight: 700,
      backgroundColor: "#111827"
    }}
  >
    New
  </text>
</box>
```

Use `clip: true` when overlaid children must stay inside rounded or bounded edges.