Box

Polymorphic flex primitive. Use it whenever you need a flex container with type-checked direction, gap, alignment and justification — and the option to render as any HTML element via as.

Import

import { Box } from 'damo-ui'

Row layout

1<Box gap={3} align="center">
2  <span>One</span>
3  <span>Two</span>
4  <span>Three</span>
5</Box>

Column layout

1<Box direction="column" gap={2}>
2  <span>Top</span>
3  <span>Middle</span>
4  <span>Bottom</span>
5</Box>

Polymorphic — render as any element

Pass as to render Box as a different tag while keeping the layout utilities. Useful for landmark elements (<section>, <header>, <aside>) or to forward to a Next Link.

1<Box as="section" direction="column" gap={4}>
2  <h2>Heading</h2>
3  <p>Paragraph</p>
4</Box>

Props

When to use it

• Most flex layouts in product code — replaces ad-hoc flex flex-row gap-3 items-center stacks.
• For wider, page-level layouts with a max-width, prefer Container.
• When the children must split into named regions, use a dedicated layout component such as AppShell.