Skip to main content
Each breakpoint matches a fixed screen width. Values are min-width based and apply when the screen width is equal or greater.
SizeDescriptionWidth
initialPhones (portrait)0px
xsPhones (landscape)520px
smTablets (portrait)768px
mdTablets (landscape)1024px
lgLaptops1280px
xlDesktops1640px

​
Usage

Most component size and layout props will accept an additional Responsive object shape for modifying the given prop across breakpoints. Each size maps to a corresponding key, the value of each will be applied when the screen size is greater than or equal to the named breakpoint. 
<Heading
  size={{
    initial: "3",
    md: "5",
    xl: "7",
  }}
/>