Chakra 3.3

We're excited to announce the release of Chakra UI v3.3.0! This release brings several exciting new features and improvements to enhance your development experience.

QR Code

The new QRCode component allows users to generate QR codes for various use cases. This component is perfect for applications that need to generate QR codes for sharing information.

New Examples

File Upload with Paste Event

We showcase how to handle files pasted from the clipboard using the FileUpload component.

We showcase how to hide menu content when it's detached from its trigger using the hideWhenDetached positioning option.

CLI Improvements

We've enhanced our CLI with more flexible snippet installation options:

New --tsx Flag

By default, the CLI detects if your project is a TypeScript project and installs the appropriate jsx or tsx snippets.

With this flag, you can explicitly install the jsx or tsx snippets.

bash

npx @chakra-ui/cli@latest snippet add [...components] --tsx

Bug Fixes

This release also includes important bug fixes:

Collapsible: Fixed a bug where the opening animation replayed when an open collapsible was re-rendered.
Dialog, Popover: Fixed an issue causing dialogs or popovers to close if the focused element was removed from the DOM.
FileUpload: Fixed a bug causing the hidden input to be out of sync with accepted files.
Menu, Popover: Fixed inconsistent interaction detection outside the component when the trigger was inside a scrollable container.
Pagination: Corrected an issue where the page range returned an incorrect end value when pageSize exceeded count.
Image: Fix issue where htmlWidth and htmlHeight doesn't work in Image or chakra.image elements.
System
- Improve typesafety for layer styles to support common shorthands like bg, bgColor, bgImage.
- Fix compound variant matching not working with colorPalette prop.

Upgrading

To upgrade to the latest version, run: