@chakra-ui/react

Chakra UI is an accessible, modular React component library that provides a set of composable building blocks for creating user interfaces with speed. Chakra's key differentiator is its style props system — components accept CSS properties directly as props (bg='blue.500', p={4}, fontSize='lg'), powered by a comprehensive theme token system that ensures design consistency. The theme system maps semantic tokens to values: colors use a numeric scale (blue.100 through blue.900), spacing uses a consistent scale, and responsive values are expressed as arrays [base, md, lg] or objects {{ base: 'sm', md: 'lg' }}. Chakra UI includes essential components like Box, Flex, Grid, Stack, Button, Input, Modal, Drawer, Toast, Menu, Tabs, Accordion, and form controls, all with built-in accessibility features including focus management, keyboard navigation, and ARIA attributes. The library supports dark mode through useColorMode with automatic class-based or system preference detection. Component variants are defined in the theme, enabling consistent styling across instances. Chakra's factory function (chakra.div) creates styled components that accept all style props. The library has been widely adopted for its excellent developer experience, particularly by teams that prefer a prop-based styling approach over CSS class names.