Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Spacing

Learn how to customize spacing in Chakra UI

info
Please read the overview first to learn how to properly customize the styling engine, and get type safety.

Example

Here's an example of how to customize spacing in Chakra UI.

theme.ts

import { createSystem, defaultConfig, defineConfig } from "@chakra-ui/react"

const customConfig = defineConfig({
  theme: {
    tokens: {
      spacing: {
        "128": { value: "32rem" },
        "144": { value: "36rem" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

Usage

Here's how to use the custom spacing in Chakra UI.

<Box margin="128" />

Previous

Sizes

Next

Enterprise