Balance Logo
Reckon Design System
Open playroom


The box primitive allows consumers to implement aesthetic changes within the constraints of the theme.
pnpm add @balance-web/box
Import usage
import {
} from '@balance-web/box';
  • Code
  • API

Box is the lowest-level component for binding theme-based styles to an individual element on the screen. Internally, all Balance components are made up of Boxes.

Semantic elements

By default, Box renders a div element. You can customise this via the as prop. Non-Balance props will be forwarded to the underlying element.

<Box as="span" aria-hidden>



The padding keys allow targeting each side as well as the x-axis and y-axis.

  • padding
  • paddingTop
  • paddingRight
  • paddingBottom
  • paddingLeft
  • paddingX padding-left and padding-right
  • paddingY padding-top and padding-bottom
Edit in Playroom


The margin keys allow targeting each side as well as the x-axis and y-axis.

  • margin
  • marginTop
  • marginRight
  • marginBottom
  • marginLeft
  • marginX margin-left and margin-right
  • marginY margin-top and margin-bottom


Apply a border to the box:

Border radius

Apply a border-radius to the box:

Box shadow

Apply a box-shadow to the box:


Apply a height to the box:


Apply a width to the box:


Mix and match style properties to achieve the desired aesthetic.

Responsive Props

Instead of manually managing media queries and adding nested style objects throughout a code base, we offer a convenient shorthand syntax for adding responsive styles with a mobile-first approach.

Each of the above style props accepts a value or array of values. To skip certain breakpoints, you can pass null to any position in the array to avoid generating unnecessary CSS.

While this approach has been widely adopted with great success, much like any new idea, it can seem odd or off-putting at first. We recommend giving it a chance.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo