Chakra UI: React component library with accessibility
Themeable React components with built-in accessibility and Emotion styling.
Learn more about chakra-ui
Chakra UI is a React component library that provides pre-built, themeable interface components with built-in accessibility features compliant with WAI-ARIA standards. It uses Emotion as its underlying CSS-in-JS styling engine to enable dynamic theming through a centralized design token system that controls colors, spacing, typography, and other visual properties. The library implements a composable architecture where components can be combined and styled through props-based APIs, allowing developers to customize appearance without writing custom CSS. Each component is constructed with semantic HTML and includes keyboard navigation, focus management, and screen reader support by default. The theming system supports light and dark color modes through context providers that propagate theme values throughout the component tree.
Built-in Accessibility Standards
Components ship with WAI-ARIA patterns, keyboard navigation, and focus management implemented by default. Reduces accessibility implementation time and ensures compliance without manual ARIA attribute configuration.
CSS-in-JS Theming
Emotion-based styling enables runtime theme switching and dark mode without CSS file management. Component styles are scoped and dynamic, supporting design tokens and responsive props at the component level.
React Server Components
Compatible with Next.js App Router and RSC architecture for modern React patterns. Allows server-side rendering of UI components while maintaining client-side interactivity where needed.
import { ChakraProvider, Button } from '@chakra-ui/react';
function App() {
return (
<ChakraProvider>
<Button colorScheme="blue" size="lg" onClick={() => alert('Clicked!')}>
Click Me
</Button>
</ChakraProvider>
);
}Adds new Carousel component; fixes Combobox input overflow and missing CodeBlock client directive.
- –Use the new Carousel component for image/content rotation without additional dependencies.
- –Update Combobox styles automatically handle padding to prevent text overflow onto trigger elements.
Adds a new carousel component to the Panda preset with no breaking changes reported.
- –Import and use the new carousel component for building image or content sliders in your UI.
- –Release notes do not specify API details, props, or integration steps for the carousel component.
Release notes do not specify breaking changes, new features, or upgrade requirements.
- –Review the changelog or commit history directly to identify any changes before upgrading.
- –Test the CLI in a non-production environment to catch any undocumented behavioral changes.
See how people are using chakra-ui
Related Repositories
Discover similar tools and frameworks used by developers
chenyuluoyan_thin
A refined thin-weight Chinese font family designed for modern digital interfaces, offering graceful readability and aesthetic appeal for web and application typography.
astro
Static site generator with selective component hydration.
tailwindcss-typography
Cascading typographic styles for unstyled HTML containers.
bootstrap
Sass-based component library with responsive grid system.
responsive-html-email-template
Cross-client HTML email starter with inline CSS support.