Box

Structural container with borders and spacing.

Box

Box creates structure for your UI. It can draw optional borders, apply padding and act as a flex container for nested content.

<box border padding={1} width={32}>
  <text content="Settings" />
</box>

You can control the layout direction and alignment inside a box using flex properties. Below is a row that evenly distributes its children.

<box flexDirection="row" justifyContent="space-between" width="100%">
  <box border padding={1}>
    <text content="Left" />
  </box>
  <box border padding={1}>
    <text content="Right" />
  </box>
</box>

Boxes can also be used as overlays with absolute positioning. This is useful for toast notifications, modals, or floating help panels.

<box width="100%" height="100%">
  <box
    position="absolute"
    right={1}
    top={1}
    border
    padding={1}
    backgroundColor="#24283b"
  >
    <text content="Press ? for help" />
  </box>
</box>

Props

Prop	Type	Notes
`border`	`boolean`	Draw a border around the box. Great for panels and grouping.
`padding`	`number`	Add inner space between the border and children.
`flexDirection`	`row \| column`	Layout children horizontally or vertically.
`flexGrow`	`number`	Use `1` to fill remaining space (typical for main panels).
`position`	`relative \| absolute`	Use absolute for overlays (toasts, modals, tooltips).

Tip: keep a consistent “app shell” structure (header/body/footer) and only swap main content. This reduces layout churn and focus bugs.

Recipes

Recipe: centered modal overlay (use absolute positioning + a dim backdrop).

<box width="100%" height="100%">
  <box position="absolute" width="100%" height="100%" backgroundColor="#000000" opacity={0.4} />
  <box
    position="absolute"
    border
    padding={1}
    width={50}
    height={8}
    left={10}
    top={5}
    backgroundColor="#1f2335"
  >
    <text content="Confirm?" bold />
  </box>
</box>