Use the Box component to quickly create responsive layouts with flexible items. Adjust the spacing, alignment, and direction for fine-tuned control over your layouts.

Basic Layout

Box container with a basic row layout.


<Box width="12" height="12" style={{ backgroundColor: 'var(--color-accent-4)' }}></Box>

API

Props

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`MarginProps`	`Token<MarginProps>`	-	-
`PaddingProps`	`Token<PaddingProps>`	-	-
`display`	`Responsive<DisplayValue>`	-	-
`LayoutProps`	`Token<LayoutProps>`	-	-

Tokens

Container