Creating custom breakpoints

November 15, 2024

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

components/theme.ts

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

"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, run the CLI typegen command to generate the types. See the CLI docs for how to run typegen in postinstall, CI, and monorepos.

npx @chakra-ui/cli 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.

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