Core Concepts and Design Principles

Chakra UI is built around a small set of core ideas that simplify styling React applications, including design tokens, style props, and accessibility-first components.

Design tokens represent predefined values such as colors, spacing, and typography, ensuring visual consistency across an application. Instead of hardcoding styles, tokens like blue.500 reference values defined in the theme.

Style props allow styles to be applied directly to components using props such as p, m, and bg, reducing the need for separate CSS files. Accessibility is a core principle in Chakra UI, with components designed to support keyboard navigation, screen readers, and usability best practices by default.