Build faster with Premium Chakra UI Components 💎

Learn more

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, you run the CLI typegen command to generate the types.

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.

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