---
title: Creating custom breakpoints
description: Learn how to create custom breakpoints in Chakra UI
publishedAt: "2024-11-15"
collection: theming
---

Custom breakpoints are defined in the `breakpoints` property of your theme.

```tsx title="components/theme.ts" /breakpoints: {/
const config = defineConfig({
  theme: {
    breakpoints: {
      xl: "80em" ,
      "2xl": "96em" ,
      "3xl": "120em" ,
      "4xl": "160em" ,
    },
  },
})

export const system = createSystem(defaultConfig, config)
```

Next, you add the new `system` to your `components/ui/provider.tsx` files

```tsx {3} /value={system}/
"use client"

import { system } from "@/components/theme"
import {
  ColorModeProvider,
  type ColorModeProviderProps,
} from "@/components/ui/color-mode"
import { ChakraProvider } from "@chakra-ui/react"

export function Provider(props: ColorModeProviderProps) {
  return (
    <ChakraProvider value={system}>
      <ColorModeProvider {...props} />
    </ChakraProvider>
  )
}
```

Next, you run the CLI `typegen` command to generate the types.

```bash
npx chakra typegen ./components/theme.ts
```

> Note: You might need to restart your TypeScript server for the types to be
> picked up.

## Using the breakpoint

With that in place, you can use the breakpoints when writing responsive styles.

```tsx /"4xl"/
<Box fontSize={{ base: "sm", "4xl": "lg" }}>Hello world</Box>
```
