Chakra UI v3 · mobile-first · em
480 · 768 · 992 · 1280 · 1536
5 breakpoints from 480px to 1536px. Chakra defines breakpoints in em by default, matching Foundation's reasoning about user font-size preferences.
| Name | Value | Pixels | Media query | Devices ≥ |
|---|---|---|---|---|
base | 0em | — | (no media query — default) | 242 |
sm | 30em | 480 | @media (min-width: 30em) | 104 |
md | 48em | 768 | @media (min-width: 48em) | 95 |
lg | 62em | 992 | @media (min-width: 62em) | 63 |
xl | 80em | 1280 | @media (min-width: 80em) | 50 |
2xl | 96em | 1536 | @media (min-width: 96em) | 24 |
Configuration
const breakpoints = {
sm: '30em', md: '48em', lg: '62em', xl: '80em', '2xl': '96em',
}How Chakra UI compares
| Framework | Unit | 480 | 576 | 600 | 640 | 768 | 992 | 1024 | 1200 | 1280 | 1440 | 1536 | 1600 | 1920 | Only here |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tailwind CSS | rem | · | · | · | sm | md | · | lg | · | xl | · | 2xl | · | · | — |
| Bootstrap | px | · | sm | · | · | md | lg | · | xl | · | · | · | · | · | 1400 xxl |
| MUI (Material UI) | px | · | · | sm | · | · | · | · | lg | · | · | xl | · | · | 900 md |
| Bulma | px | · | · | · | · | · | · | desktop | · | · | · | · | · | · | 769 tablet, 1216 widescreen, 1408 fullhd |
| Foundation | em | · | · | · | medium | · | · | large | xlarge | · | xxlarge | · | · | · | — |
| Chakra UI | em | sm | · | · | · | md | lg | · | · | xl | · | 2xl | · | · | — |
| Ant Design | px | · | sm | · | · | md | lg | · | xl | · | · | · | xxl | · | — |
| Vuetify | px | · | · | sm | · | · | · | · | · | lg | · | · | · | xl | 960 md, 2560 xxl |
| Material Design 3 | dp | · | · | Medium | · | · | · | · | Large | · | · | · | Extra-large | · | 840 Expanded |
| Open Props | em | --sm | · | · | · | --md | · | --lg | · | · | --xl | · | · | --xxl | 240 --xxs, 384 --xs |
Questions
What are the default Chakra UI breakpoints?
Chakra UI v3 ships 6 tiers: base (0px), sm (480px), md (768px), lg (992px), xl (1280px), 2xl (1536px).
Are Chakra UI breakpoints min-width or max-width?
Chakra UI is mobile-first, so every breakpoint is a min-width query. Styles apply from that width upward.
How do I change the Chakra UI breakpoints?
Override them in the configuration — see the snippet on this page. Changing them is usually a mistake unless you have a concrete layout reason; the defaults are chosen to sit between real device clusters.
Why does Chakra UI use em?
Breakpoints in em respond to the user's browser font-size setting, so someone who has increased their default text size gets the layout that suits it. Pixel breakpoints ignore that preference.
Other frameworks
Tailwind CSS5 tiersBootstrap5 tiersMUI (Material UI)4 tiersBulma4 tiersFoundation4 tiersAnt Design5 tiersVuetify5 tiersMaterial Design 34 tiersOpen Props7 tiers
Values taken from the official Chakra UI documentation (https://chakra-ui.com/docs/theming/breakpoints), version v3, verified 2026-08-07.