Components

Box

The Box component is a low-level primitive used for layout purposes. It can be used to create grid layouts, apply padding or margin, and more.

Here is an example of how the Box component can be used to apply padding and border around its children.

This is a box.
import { Box } from '@sproutsocial/racine'

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON
BORDER
LAYOUT
POSITION
FLEX_CONTAINER
FLEX_ITEM
Learn more

Recipes

2 elements side-by-side:

Centering elements horizontally and vertically:

This content will be centered within the box.