---
title: "useBreakpoints"
description: "This composable extends the functionality of the useWindowSize composable to manage responsive breakpoints"
package: "maz-ui"
url: "https://maz-ui.com/composables/use-breakpoints"
---

# useBreakpoints

> This composable extends the functionality of the useWindowSize composable to manage responsive breakpoints

- Package: `maz-ui`
- Import: `import { useBreakpoints } from 'maz-ui/composables/useBreakpoints'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/composables/use-breakpoints

## Basic usage

```ts
const breakpoints = {
  'sm': '640px',
  'md': '768px',
  'lg': '1024px',
  'xl': '1280px',
  '2xl': '1536px',
}

const {
  isLargeScreen,
  isMediumScreen,
  isSmallScreen,
} = useBreakpoints({
  breakpoints,
  initialWidth: 0,
  mediumBreakPoint: 'md',
  largeBreakPoint: 'lg',
})
```

**Warning:**

More documentation to come