Everybody is waiting for the launch of Chakra UI v3.
What are the news available at this point?
9 days ago the 3.0.0 version has been launched on npm (here is the announcement).
The highly anticipated release of Chakra UI v3 is a topic of excitement and curiosity within the development community.
While the official release date was delayed, we finally had the chance to check it and review it (and already see some feedback on Reddit).
Current Status of Chakra UI v3
Chakra UI v3 was in its final stages of development, with a pre-release version available for testing. The development team, led by Segun Adebayo, has been actively gathering feedback from early adopters and fine-tuning the library. Recent discussions on GitHub indicated that the release was close, and even though we were not able to identify any official release on Chakra UI official website we can see on Github the version is available.
For those eager to try out the newer version, Chakra UI v3, it can be installed via the next tag on npm (npm install @chakra-ui/react@next). However, keep in mind that documentation and certain components are still being finalized.
Major Features in Chakra UI v3
The upcoming release of Chakra UI v3 brings several key improvements designed to modernize the library and offer enhanced performance, flexibility, and user experience. Here are some of the most notable changes:
1. Improved Performance with Zero Runtime CSS-in-JS
One of the most requested features by Chakra UI users has been the removal of runtime CSS-in-JS, which previously impacted performance. Chakra UI v3 addresses this by introducing a zero-runtime CSS-in-JS system, improving performance, particularly in environments like React Server Components (RSC)(Chakra UI material). The new Panda library is set to handle styling, extracting styles at build time rather than runtime, and utilizing modern web standards like CSS variables.
2. State Machines with Zag.js
Chakra UI v3 takes a significant leap forward in managing component logic by incorporating state machines using Zag.js. This approach makes component logic more predictable and easier to debug. With Zag.js, interactive components in Chakra UI will be powered by reusable state machines, improving consistency and ease of maintenance across various JavaScript frameworks(Chakra UI material).
3. Modular and Headless Components with Ark
The new version introduces Ark, a headless component system built on top of Zag.js. Ark allows developers to use state machine logic while maintaining full control over the component's appearance. This makes Chakra UI v3 more flexible and customizable, giving developers the power to create unique designs without being tied to predefined component styles.
4. Framer-Motion No Longer a Dependency
In response to community feedback, Chakra UI v3 has dropped its dependency on Framer-Motion for animations. While Chakra will still offer out-of-the-box transitions and animations, developers now have the option to customize or replace animations with native CSS or other libraries without being tied to Framer-Motion.
Delays and Challenges
Although there has been excitement surrounding the release of Chakra UI v3, there have also been delays. One of the primary reasons for the postponement was the complexity involved in addressing various community requests, such as the removal of runtime CSS-in-JS and ensuring compatibility with popular frameworks like Next.js (as you can read here).
Additionally, users have reported some issues while testing the beta version, such as bugs related to component behavior and TypeScript errors.
Chakra UI v3 and Next.js Compatibility
One of the most common questions among developers is whether Chakra UI v3 will work seamlessly with the Next.js App Router and React Server Components. While there were early concerns about compatibility, the Chakra team has confirmed that v3 will be fully compatible with both Next.js and React Server Components.
For developers looking to use Chakra UI v3 with server-side rendering (SSR) and Next.js, the library will continue to support these features.
What’s Next for Chakra UI?
It seems that the focus will be shifting to expanding the range of available components. The team has already hinted at the inclusion of new components such as date pickers and custom selects, which are in high demand among users.
Additionally, the Chakra UI Pro components will also be updated to align with v3, further enhancing the developer experience.
What does that mean for Polipo?
The release of Chakra UI v3 was highly anticipated (read more on this blog post by Chakra UI Lead Engineer, Segun Adebayo) and appears to be in his early stages.
Some of the early adopters hinted at shadhn to address some of the challenges introduced by the v3.
As we wrote on our blog, MUI alternatives like Chakra UI all pose some sustainability issues over the long term, when a designer is introduced in the equation (with Figma).
The redesign (and technical debt) ahead could be though, this is why we created Polipo.
A Figma plugin and a library that enable developers to use any Figma design as the live and synchronized UI of a real app.
All without generating code.
Would you like to try it?
Start here.