Arwes LogotypeArwes Logotext


The breakpoints tools are a simplified version of the Material specification.

"A breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation."

The breakpoints define 6 screen ranges with default values:

  • xs (extra small) of 0px.
  • sm (small) of 600px.
  • md (medium) of 960px.
  • lg (large) of 1280px.
  • xl (extra large) of 1920px.

They can be configured with different values optionally:

const theme = createTheme({
breakpoints: {
values: {
sm: 400,
md: 768

In this case, the small and medium breakpoints are updated.

These breakpoints values are used to create CSS media queries dynamically. The breakpoints functions can be executed in the components dynamic styles generation to add specific media queries.

Breakpoint Up

To create a media query from one breakpoint upwards:

// '@media screen and (min-width: 1920px)'

Upwards large using default values.

Breakpoint Down

To create a media query from one breakpoint downwards minus 1:

// '@media screen and (max-width: 1919px)'

Downwards large breakpoint using default values.

Only Breakpoint

To create a media query between the provided breakpoint and just before the next:

// '@media screen and (min-width: 600px) and (max-width: 959px)'

From small to medium range using default values.

Between Breakpoints

To create a media query between two provided breakpoints:

theme.breakpoints.between('md', 'lg');
// '@media screen and (min-width: 960px) and (max-width: 1919px)'

From medium to large range using default values.