Layout

Aspect Ratio

Use the aspectRatio prop to set the desired aspect ratio of an element.

// raw value
<Box aspectRatio="1.2" />

// token
<Box aspectRatio="square" />

Prop	CSS Property	Token Category
aspectRatio	aspect-ratio	aspectRatios

Break

Break After

Use the breakAfter prop to set how page, column, or region breaks should behave after an element.

<Box columns="2">
  <Box>Item 1</Box>
  <Box breakAfter="page">Item 2</Box>
</Box>

Prop	CSS Property	Token Category
breakAfter	break-after	-

Break Before

Use the breakBefore prop to set how page, column, or region breaks should behave before an element.

<Box columns="2">
  <Box>Item 1</Box>
  <Box breakBefore="page">Item 2</Box>
</Box>

Prop	CSS Property	Token Category
breakBefore	break-before	-

Break Inside

Use the breakInside prop to set how page, column, or region breaks should behave inside an element.

<Box columns="2">
  <Box>Item 1</Box>
  <Box breakInside="avoid">Item 2</Box>
</Box>

Prop	CSS Property	Token Category
breakInside	break-inside	-

Box Decoration Break

Use the boxDecorationBreak prop to set how box decorations should behave when the box breaks across multiple lines, columns, or pages.

<Box bgImage="linear-gradient(red, blue)" boxDecorationBreak="clone">
  Chakra is <br /> great!
</Box>

Prop	CSS Property	Token Category
boxDecorationBreak	box-decoration-break	-

Box Sizing

Use the boxSizing prop to set the box sizing of an element.

<Box boxSizing="border-box" padding="4" width="8" height="8" />

Prop	CSS Property	Token Category
boxSizing	box-sizing	-

Columns

Use the columns prop to set the number of columns for an element.

<Box columns={2} />

Prop	CSS Property	Token Category
columns	columns	-

Float

Use the float prop to set the float of an element.

<Box>
  <Text>As much mud in the streets...</Text>
  <Box float="left">Float me</Box>
</Box>

Prop	CSS Property	Token Category
float	float	-

Clear

Use the clear prop to set whether an element must be moved below (cleared) floating elements that precede it.

<Box>
  <Box float="left">Left</Box>
  <Box float="right">Right</Box>
  <Box clear="none">
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </Box>
</Box>

Prop	CSS Property	Token Category
clear	clear	-

Isolation

Use the isolation prop to set whether an element should explicitly create a new stacking context.

<Box isolation="isolate">
  <Box bg="red.500" width="10" height="10" />
</Box>

Prop	CSS Property	Token Category
isolation	isolation	-

Object Fit

Use the objectFit prop to set how an image or video should be resized to fit its container.

<Image src="..." objectFit="cover" width="10" height="10" />

Prop	CSS Property	Token Category
objectFit	object-fit	-

Object Position

Use the objectPosition prop to set how an element should be positioned within its container.

<Image src="..." objectPosition="center" width="10" height="10" />

Prop	CSS Property	Token Category
objectPosition	object-position	-

Overflow

Use the overflow prop to control how content that exceeds an element's dimensions is handled. This property determines whether to clip the content, add scrollbars, or display the overflow content.

<Box overflow="hidden" maxHeight="120px" />
<Box overflow="auto" maxHeight="120px" />

Prop	CSS Property	Token Category
overflow	overflow	-

Overscroll Behavior

Use the overscrollBehavior prop to control what the browser does when reaching the boundary of a scrolling area.

<Box maxHeight="120px" overscrollBehavior="contain" />

Prop	CSS Property	Token Category
overscrollBehavior	overscroll-behavior	-

Position

Use the position utilities to set the position of an element.

<Box position="absolute" />
<Box pos="absolute" /> // shorthand

Prop	CSS Property	Token Category
position	position	-

Top / Right / Bottom / Left

Use the top, right, bottom and left utilities to set the position of an element.

<Box position="absolute" top="0" left="0" />

// using spacing tokens
<Box position="absolute" top="4" />

// using hardcoded values
<Box position="absolute" top="100px" />

Use the logical equivalents of inset{Start|End} utilities to set the position of an element based on the writing mode.

<Box position="absolute" insetStart="0" />

Prop	CSS Property	Token Category
top	top	spacing
right	right	spacing
bottom	bottom	spacing
left	left	spacing
start, insetStart, insetInlineStart	inset-inline-start	spacing
end , insetEnd, insetInlineEnd	inset-inline-end	spacing
insetX, insetInline	inset-inline	spacing
insetY, insetBlock	inset-inline	spacing

Visibility

Use the visibility prop to control the visibility of an element.

<Box visibility="hidden" />

Prop	CSS Property	Token Category
visibility	visibility	-

Z-Index

Use the zIndex prop to set the z-index of an element.

// using hardcoded values
<Box zIndex="1" />

// using token
<Box zIndex="overlay" />

Prop	CSS Property	Token Category
zIndex	z-index	zIndices