In order to help you create clean, consistent layouts, Chakra UI provides building blocks that take advantage of constraint-based design principles.
Chakra UI's design principles are built around 2 core concepts:
Design tokens are named values that are used in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
Chakra UI's theming system leverages design tokens for different style properties like color, spacing, font sizes, font weights, opacity, radii, shadows, z-indices, border widths and breakpoints.
This allows us to create a system that can be scaled across different such as a typographic (font-size) scale, a spacing scale for margin and padding, and a color object.
By default Chakra UI uses the System UI Theme Specification
Because Chakra UI uses styled system under the hood, it allows you to reliably create consistent spacing of elements in your applications. The space key can directly be referenced by padding, margin, top, right, bottom and left style properties.
By default, Chakra UI uses a comprehensive 4pt grid as a single unit. So in order to apply a padding of 32px, you can use the value 32px / 4px = 8. i.e. padding: 8
export default {
space: {
px: "1px",
"0": "0",
"1": "0.25rem",
"2": "0.5rem",
"3": "0.75rem",
"4": "1rem",
"5": "1.25rem",
"6": "1.5rem",
"8": "2rem",
"10": "2.5rem",
"12": "3rem",
"16": "4rem",
"20": "5rem",
"24": "6rem",
"32": "8rem",
"40": "10rem",
"48": "12rem",
"56": "14rem",
"64": "16rem",
},
};
Below are some examples of how to apply values spacing values to Chakra components.