Chakra UI review: application setup and contributor footprint
Adding Chakra UI to an application and building its repository are different jobs. The installation guide names two packages, then requires snippets, a provider, and compiler configuration. Our recorded repository run downloaded 2,166 packages. That larger number describes contributor dependencies, not the dependency count or browser payload of a consumer application.
Chakra UI describes itself as a component system for React web apps and design systems. Its migration guide documents tokens, recipes, slot recipes, and compound components. Those pieces make it a candidate for teams that want to define shared interface rules. Whether they suit your product needs an application trial; the repository build cannot answer that question.
What our recorded run establishes
On September 21, 2026, our stored run used commit 55aee43ad25aab61b898f51e0b72f6b0a90df1be. Dependency installation completed successfully in 54 seconds. The recorded dependency count was 2,166, with a footprint of 1,712 MB. The build command completed successfully in 97 seconds, and the test command completed successfully in 82 seconds.
The stored Vitest summary reported 1,063 passed, 0 failed, and 0 skipped across 88 test files. These are reported results from that command. No new execution or complete-log reconciliation was performed, so they do not establish exhaustive unique test coverage. The test tail also contains a React warning about an update not wrapped in act(...); the command still exited successfully. The wrapper's roughly 82-second elapsed time differs from Vitest's own reported duration of 79.32 seconds.
The checkout metrics were 3,849 files, approximately 194,191 lines of source, and 161.8 MB before dependency installation. Detection identified workspaces and 3 CI workflows, with no Dockerfile, Compose file, or top-level tests directory. Tests appeared under package-level tests paths, so the missing top-level directory does not mean the repository lacks tests.
The recorded sandbox configuration was 3 CPUs, 8 GB of memory, and image lab-node:22. That image label is not verification of Node 22: the raw detection record separately lists nodeMajor 24. The actual runtime version remains unverified here. The install tail records pnpm 11.10.0 and React and React DOM 19.2.6; those installed versions do not establish the package's minimum supported React version.
The build tail shows generated JavaScript and type definitions, plus local Chakra CLI execution for theme ejection and type generation. It does not establish that a standalone CLI was installed and checked outside the workspace. No consumer bundle, rendering workload, browser matrix, or security audit result was recorded.
Application setup still uses Emotion at runtime
The supplied installation guide displays version 3.37.0 and requires Node.js 20.x or newer. It documents installing @chakra-ui/react and @emotion/react, adding snippets with the CLI, and wrapping the application with the generated provider. The provider combines ChakraProvider for styling with ThemeProvider from next-themes for color mode. TypeScript projects also receive compiler configuration instructions.
The guide explicitly says Chakra UI uses Emotion at runtime today. Its zero-runtime styling model is a long-term direction inspired by Panda CSS, with no delivery date established by this evidence. If runtime styling conflicts with your requirements, evaluate that constraint before investing in a Chakra theme. Our monorepo measurements do not quantify Emotion's browser cost or the size of an application using Chakra.
A v2 migration changes application source
The v3 migration guide recommends a codemod for component renames, prop changes, import updates, and compound component restructuring. It documents a dry preview before modifying files. Review that preview before applying the migration.
The documented changes include isOpen becoming open, colorScheme becoming colorPalette, Modal becoming a compound Dialog, and token values gaining value wrappers. Recipes and slot recipes replace style configuration. The guide also removes the old icons package and changes hooks and other components.
These changes justify treating migration as application work. Our repository test result cannot establish that your v2 wrappers, custom theme, or screens retain their behavior and appearance. The supplied @chakra-ui/react 3.37.0 release extract documents component additions and fixes; it does not substantiate the earlier claim that this release batch fixed codemod preview and import transforms.
Check the behavior your application depends on
Issue 11003 reports that programmatic selection in controlled Tabs can click an anchor trigger and cause navigation in Chakra UI 3.37.0. This is a user report, not a behavior we reproduced. An October 13, 2026 comment says an upstream change is present on main but had not yet reached a Chakra release. That comment does not verify a released fix or establish the status of the previously mentioned pull request. Test your exact package version and routing composition before relying on linked tabs.
The supplied Button issue 10929 is closed as not planned, with a September 29, 2026 automated inactivity closure. Its discussion contains implementation references and earlier status changes. Those references alone do not establish whether accessibleWhenDisabled is available in a particular released package. The issue should not be presented as a currently open feature request with an open fix.
Neither issue supports a current total of open issues or pull requests. This review therefore makes no current queue-size or adoption claim.
Alternatives and the next useful check
Material UI's README identifies it as an implementation of Google's Material Design system and names MUI X as its extension for complex components. Choose that direction when Material Design is a requirement. Mantine's README lists core components, hooks, forms, notifications, and charts among its packages. Evaluate it when that package mix matches your interface needs. These are documented roles, not comparative performance or accessibility results.
For Chakra UI, start with a representative screen using your actual theme and routing. Check keyboard interaction, focus after overlays close, and any controlled linked tabs. For a v2 application, review the codemod preview and compare the migrated screen visually. These are recommended next steps, not tests performed for this review.
How the ratings work
Scores are editorial judgments about the supplied evidence, not benchmark grades. The scale is 1 for substantial demonstrated obstacles, 2 for limited supporting evidence, 3 for a documented path with material work or uncertainty, 4 for detailed documentation or successful recorded checks with bounded limitations, and 5 for broad, independently corroborated evidence across the relevant use cases. Unknown adoption or compatibility does not earn a high score.
Setup receives 3 because the application path has several configuration steps and the contributor run has a substantial dependency footprint. Documentation receives 4 for the supplied installation and migration instructions, without claiming that every guide was checked. Community receives 2 because the extracts show public contributions and issue discussion but do not establish adoption or support responsiveness. Maturity receives 3 because the recorded commands succeeded while application compatibility and coverage remain unverified.