Skip to Content
DocsEnterpriseBlogShowcase
Sponsor

Sizes

Learn how to customize sizes 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 sizes in Chakra UI.

theme.ts

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

const customConfig = defineConfig({
  theme: {
    tokens: {
      sizes: {
        "1/7": { value: "14.285%" },
        "2/7": { value: "28.571%" },
        "3/7": { value: "42.857%" },
      },
    },
  },
})

export const system = createSystem(defaultConfig, customConfig)

Usage

Set the value of any size related properties, like width, height, minWidth, minHeight, maxWidth, maxHeight, etc. to the sizes token.

<Box width="1/7" height="2/7" />

Previous

Recipes

Next

Spacing