Box

Box applies Foundation spacing, color, radius, and stroke tokens to a single surface. Use it when you need a token-backed wrapper without inventing CSS.

Inset content

Contract

Overview

Machine-readable contract from Component Spec.

component: boxexport: Boxversion: 1attributes: data-refineui=box

Anatomy

Part	data-refineui
root	box

Layout

Property	Value
direction	logical
rtl	true

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Box } from "@refineui/react";

<Box padding="sizeLarge" background="backgroundSurface" radius="roundedLarge">
  Content
</Box>

<Box
  as="section"
  paddingX="sizeLarge"
  paddingY="sizeSmall"
  border="strokeWidthThin"
  borderColor="borderDefault"
  background="backgroundPrimary"
>
  Outlined section
</Box>

API Reference

Prop	Default	Type	Description
as	"div"	ElementType	Root element.
padding	—	Spacing token	Padding on all sides.
paddingX	—	Spacing token	Horizontal padding.
paddingY	—	Spacing token	Vertical padding.
background	—	Background / surface alias	Fill color.
radius	—	Radius token	Corner radius.
border	—	Stroke token	Border width.
borderColor	—	Border color alias	Border color (defaults with `border`).