File: breakpoints.md | Updated: 11/15/2025
ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors
Getting started Styling Layout Releases Resources
Overview Color Dark mode Typography Spacing Breakpoints Radius Shadows Cursors
Box Flex Grid Container Section
Text Heading Blockquote Code Em Kbd Link Quote Strong
Alert Dialog Aspect Ratio Avatar Badge Button Callout Card Checkbox Checkbox Group Checkbox Cards Context Menu Data List Dialog Dropdown Menu Hover Card Icon Button Inset Popover Progress Radio Radio Group Radio Cards Scroll Area Segmented Control Select Separator Skeleton Slider Spinner Switch Table Tabs Tab Nav Text Area Text Field Tooltip
Accessible Icon Portal Reset Slot Theme Visually Hidden
Guides
Built-in breakpoints allow you to easily build adaptive layouts.
Each breakpoint matches a fixed screen width. Values are min-width based and apply when the screen width is equal or greater.
| Size | Width |
| --- | --- |
| initial<br><br>Phones (portrait) | 0px |
| xs<br><br>Phones (landscape) | 520px |
| sm<br><br>Tablets (portrait) | 768px |
| md<br><br>Tablets (landscape) | 1024px |
| lg<br><br>Laptops | 1280px |
| xl<br><br>Desktops | 1640px |
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",
}}
/>
PreviousSpacing
NextRadius