Container

Centered page shell with token padding and full max width.

Container centers content horizontally with optional spacing-token padding. Use it as a page or section shell.

Full width, padded

Centered column

Contract

Overview

Machine-readable contract from Component Spec.

component: containerexport: Containerversion: 1attributes: data-refineui=container

Anatomy

Part	data-refineui
root	container

Layout

Property	Value
direction	logical
rtl	true

Installation

npm install @refineui/react @refineui/tokens

Usage

import { Container, Stack, Text } from "@refineui/react";

<Container padding="sizeXXLarge">
  <Stack gap="sizeLarge">
    <Text variant="headingMd" as="h1">Page title</Text>
    <Text variant="bodyMd">Body</Text>
  </Stack>
</Container>

API Reference

Prop	Default	Type	Description
as	"div"	ElementType	Root element.
padding	—	Spacing token	Padding on all sides.