1<Box
2  style={{
3    padding: "var(--rs-space-5)",
4    background: "var(--rs-color-background-base-primary)",
5    border: "1px solid var(--rs-color-border-base-primary)",
6    borderRadius: "var(--rs-radius-2)",
7  }}
8>
9  <Text>Box renders a plain div.</Text>
10</Box>

Box is the most basic layout primitive. It renders a plain <div> and passes through every standard div prop — className, style, event handlers, and so on. It adds no styling and no layout behavior of its own.

Choosing between the layout primitives:

• Box — a bare container with no built-in layout. Use it only when you need a plain wrapper element.
• Flex — a flexbox container with direction, gap, align, and justify props. Use it for one-dimensional layouts (rows or columns).
• Grid — a CSS grid container with columns, rows, and gap props. Use it for two-dimensional layouts.

Anatomy

Import and assemble the component:

1import { Box } from "@raystack/apsara";
2
3<Box />

API Reference

Renders a plain <div> element. All standard div props (attributes, event handlers, ref) are passed through to the underlying element.

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

Examples

Basic Usage

Style a Box directly with inline styles or a class.

1<Box
2  style={{
3    width: 240,
4    padding: "var(--rs-space-4)",
5    background: "var(--rs-color-background-base-primary)",
6    border: "1px solid var(--rs-color-border-base-primary)",
7    borderRadius: "var(--rs-radius-2)",
8  }}
9>
10  <Text size="small">A simple container with custom styles.</Text>
11</Box>

Composing with Flex

Box has no layout props. Nest a Flex (or Grid) inside when you need alignment or spacing.

1<Box
2  style={{
3    padding: "var(--rs-space-5)",
4    background: "var(--rs-color-background-base-secondary)",
5    borderRadius: "var(--rs-radius-3)",
6  }}
7>
8  <Flex direction="column" gap={3}>
9    <Text weight="medium">Prefer Flex for layout</Text>
10    <Text size="small">
11      Box adds no layout behavior — combine it with Flex or Grid when you need
12      alignment, gaps, or columns.
13    </Text>
14  </Flex>
15</Box>

Accessibility

• Box is a primitive: it renders a plain <div> and adds no semantics, roles, or keyboard behavior.
• Add ARIA attributes yourself when the container has a semantic purpose, or use a semantic element instead.