Styled System

The styled system of Chakra UI Vue helps you to take care of anything style related.

Constraint Based Design

In order to help you create clean, consistent layouts, Chakra UI Vue provides building blocks that take advantage of constraint-based design principles.

Chakra UI Vue's design principles are built around two core concepts:

• Design tokens
• Space scales

Design tokens

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.

These constraints help you to create consistent, high-quality user interfaces.

Chakra UI Vue'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 enables us to style our applications in ways that can be scaled across different scales. These include a typographic (font-size) scale, a spacing scale for margin and padding, and a color object.

By default Chakra UI Vue uses the System UI Theme Specification

Space Scales

Because Chakra UI Vue 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 Vue 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 spacing values to Chakra components.

<!-- Applies a padding of 4px --><CBox padding="1">  Box
</CBox><!-- Applies a padding of 16px --><CBox padding="4">  Box
</CBox><!-- Applies a padding of 32px --><CBox padding="8">  Box
</CBox>

Theme

By default, Chakra UI Vue uses a theme object that you can extend and customize as you see fit for your application. To learn more about theming in Chakra UI Vue, check out the theme page.