Layout Props

Layout props control width, height, display, and other layout-related CSS properties. Many values reference the theme's sizes scale.

Available Props

Prop	CSS Property	Theme Key
width	width	sizes
height	height	sizes
minWidth	min-width	sizes
maxWidth	max-width	sizes
minHeight	min-height	sizes
maxHeight	max-height	sizes
size	width, height	sizes
display	display	none
overflow	overflow	none
overflowX	overflow-x	none
overflowY	overflow-y	none

Theme Scale

// Default sizes scale in theme
{
  sizes: {
    xs: '20rem',    // 320px
    sm: '30rem',    // 480px
    md: '48rem',    // 768px
    lg: '62rem',    // 992px
    xl: '80rem',    // 1280px
    '2xl': '96rem', // 1536px
    full: '100%',
    half: '50%',
  }
}

Usage

<Box 
  width="sm"      // width: 30rem
  maxWidth="full" // max-width: 100%
  height={300}    // height: 300px
  overflow="auto" // overflow: auto
/>