Box

Category: Layout & primitives

A neutral container. Use it when you need spacing without semantics.

<Box p={4}>16px padding all sides</Box>
<Box px={6} py={4}>24px inline, 16px block</Box>
<Box p="2rem">Raw CSS still works</Box>

Install: @helix-ui/core

import { Box } from '@helix-ui/core';

status: stable · since: 0.1.0

Tags: primitive, container, spacing, utility

Anatomy

[ <children> ]  ← unstyled container with padding/margin shorthands

Layout

display — block
width — auto
height — auto
intrinsicSize — content size; tunable padding/margin via props
stackable — true
fullBleed — false

Visual

A presentational <div> with token-aware padding (p, px, py, …) and margin shorthands. No background, border, or radius by default — strictly a layout primitive.

Props

Name	Type	Default	Description
`p`	`number \| string`	—	Padding on all sides. Numeric input → `space.N` token; string passes through as raw CSS.
`px`	`number \| string`	—	Inline (left+right) padding.
`py`	`number \| string`	—	Block (top+bottom) padding.
`pt`	`number \| string`	—	Block-start padding — the top edge in horizontal writing modes.
`pb`	`number \| string`	—	Block-end padding.
`ps`	`number \| string`	—	Inline-start padding — left in LTR, right in RTL.
`pe`	`number \| string`	—	Inline-end padding.
`m`	`number \| string`	—	Margin on all sides.
`mx`	`number \| string`	—	Inline margin.
`my`	`number \| string`	—	Block margin.
`mt`	`number \| string`	—	Block-start margin — the top edge in horizontal writing modes.
`mb`	`number \| string`	—	Block-end margin.
`ms`	`number \| string`	—	Inline-start margin — left in LTR, right in RTL.
`me`	`number \| string`	—	Inline-end margin.
`...rest`	`HTMLAttributes<HTMLDivElement>`	—	Native div attributes.

Tokens used

space.0, space.1, space.2, space.3, space.4, space.5, space.6, space.8, space.10, space.12, space.16, space.20, space.24

Accessibility

Notes

Box is presentational. Use a semantic element where possible (<section>, <article>, etc.).

Composes with

Component	Relation	Note
`Stack`	`alternative`	Use Stack when you want a flex column/row of children.
`Flex`	`alternative`	Use Flex for explicit flexbox layout.
`Grid`	`alternative`	Use Grid for 2-D layout.

Prompt examples

These are the AI prompt → JSX mappings used by the helix-ui prompt DSL and integrations like Cursor / Claude Code.

pad a section

“add 24px of padding around this group”

<Box p={6}>{children}</Box>

horizontal rule of margin

“add top margin”

<Box mt={4}>{children}</Box>

Box

Box