Sizes

The sizes key allows you to customize the global sizing of components you build for your project. By default, these values can be referenced by the width, height, maxWidth, minWidth, maxHeight, and minHeight styles.

export const sizes = {
  '1x': '.25rem',
  '-1x': '-.25rem',
  '2x': '.5rem',
  '-2x': '-.5rem',
  '3x': '.75rem',
  '-3x': '-.75rem',
  '4x': '1rem',
  '-4x': '-1rem',
  '5x': '1.25rem',
  '-5x': '-1.25rem',
  '6x': '1.5rem',
  '-6x': '-1.5rem',
  '7x': '1.75rem',
  '-7x': '-1.75rem',
  '8x': '2rem',
  '-8x': '-2rem',
  '9x': '2.25rem',
  '-9x': '-2.25rem',
  '10x': '2.5rem',
  '-10x': '-2.5rem',
  '11x': '2.75rem',
  '-11x': '-2.75rem',
  '12x': '3rem',
  '-12x': '-3rem',
  '13x': '3.25rem',
  '-13x': '-3.25rem',
  '14x': '3.5rem',
  '-14x': '-3.5rem',
  '15x': '3.75rem',
  '-15x': '-3.75rem',
  '16x': '4rem',
  '-16x': '-4rem',
  '17x': '4.25rem',
  '-17x': '-4.25rem',
  '18x': '4.5rem',
  '-18x': '-4.5rem',
  '19x': '4.75rem',
  '-19x': '-4.75rem',
  '20x': '5rem',
  '-20x': '-5rem',
  '24x': '6rem',
  '-24x': '-6rem',
  '32x': '8rem',
  '-32x': '-8rem',
  '40x': '10rem',
  '-40x': '-10rem',
  '48x': '12rem',
  '-48x': '-12rem',
  '56x': '14rem',
  '-56x': '-14rem',
  '64x': '16rem',
  '-64x': '-16rem'
}

By default, the values are proportional. Therefore, a 1x spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.

Width

EDITABLE EXAMPLE
copy
<Stack direction="column" spacing="4x" alignItems="center">
  <Box textAlign="center" width="40x" p="1x" fontSize="sm" bg="gray:70">Width 10rem(160px)</Box>
  <Box textAlign="center" width="48x" p="1x" fontSize="sm" bg="gray:70">Width 12rem(192px)</Box>
  <Box textAlign="center" width="56x" p="1x" fontSize="sm" bg="gray:70">Width 14rem(224px)</Box>
  <Box textAlign="center" width="64x" p="1x" fontSize="sm" bg="gray:70">Width 16rem(256px)</Box>
</Stack>
<Stack direction="column" spacing="4x" alignItems="center">
  <Box textAlign="center" width="40x" p="1x" fontSize="sm" bg="gray:70">Width 10rem(160px)</Box>
  <Box textAlign="center" width="48x" p="1x" fontSize="sm" bg="gray:70">Width 12rem(192px)</Box>
  <Box textAlign="center" width="56x" p="1x" fontSize="sm" bg="gray:70">Width 14rem(224px)</Box>
  <Box textAlign="center" width="64x" p="1x" fontSize="sm" bg="gray:70">Width 16rem(256px)</Box>
</Stack>

Height

EDITABLE EXAMPLE
copy
<Stack direction="row" spacing="2x" justifyContent="center">
  <Box width="48x" height="8x" p="2x" fontSize="sm" bg="gray:70">Height 2rem(32px)</Box>
  <Box width="48x" height="16x" p="2x" fontSize="sm" bg="gray:70">Height 4rem(64px)</Box>
  <Box width="48x" height="24x" p="2x" fontSize="sm" bg="gray:70">Height 6rem(96px)</Box>
  <Box width="48x" height="32x" p="2x" fontSize="sm" bg="gray:70">Height 8rem(128px)</Box>
</Stack>
<Stack direction="row" spacing="2x" justifyContent="center">
  <Box width="48x" height="8x" p="2x" fontSize="sm" bg="gray:70">Height 2rem(32px)</Box>
  <Box width="48x" height="16x" p="2x" fontSize="sm" bg="gray:70">Height 4rem(64px)</Box>
  <Box width="48x" height="24x" p="2x" fontSize="sm" bg="gray:70">Height 6rem(96px)</Box>
  <Box width="48x" height="32x" p="2x" fontSize="sm" bg="gray:70">Height 8rem(128px)</Box>
</Stack>

Configuration Reference

Except for breakpoints, colors, and spacing, all keys in the theme object map to one of the core themes. All keys can be replaced or extended.

For more information, see the complete properties reference table.