GitHub

With so much pride, excitement, and joy, we're happy to finally release Chakra UI V1. Here are some highlights ✨:

⚛️ Add support for React 17 and Emotion 11 by @segunadebayo .
We upgraded React to use the latest versions so you can be sure that Chakra UI works correctly.

🎨 Component Theming API by @segunadebayo @with-heart
Chakra UI now provides a new theming API which makes it easy to style components and their modifiers (sizes, variants, and color scheme) from your theme.

🌓 Color mode improvement by @ljosberinn @segunadebayo
We've fixed the bugs related to Color mode and made it possible to persist color mode, set initial color mode, and lock specific
components to a certain color mode.

⚡️ Better TypeScript support by @segunadebayo
This means all components have very good TypeScript support and most low-level components like Box, Flex will support the as prop and types will be extracted properly.

🚀 Theme-aware sx prop by @segunadebayo
Just like theme-ui, we've added support for the sx prop to help you add theme-aware styles directly on any Chakra component. This is useful if you're not a fan of style props, and prefer passing all styles in one object.

<Box as="button" sx={{ bg: "green.300" }}>
  Click me
</Box>

🧩 Chakra Factory & Elements by @segunadebayo @codebender828
Chakra factory serves as an object of chakra enabled JSX elements, and also a function that can be used to enable custom component receive chakra's style props.

Here's an example:

<chakra.button
  px="3"
  py="2"
  bg="green.200"
  rounded="md"
  _hover={{ bg: "green.300" }}
>
  Click me
</chakra.button>

And many more 🐛 bug fixes and 📚 documentation improvements.

Big thanks to 40+ contributors who made this release possible. While all contributions are appreciated, I'd like to recognize the efforts of these folks who've put their all during the v1 development process:

Read the original on github.com ↗