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 theme object defines breakpoints for 6 screen ranges with the following 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:

import { createTheme } from '@arwes/design';
const theme = createTheme({
// In this case, the "small" and "medium" breakpoints
// are updated accordingly.
breakpoints: {
values: {
sm: 400,
md: 768

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

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.