Chakra 3.2

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

ColorPicker (Preview)

The new ColorPicker component allows users to select colors in various formats including HSL, RGB, and HSB. This component is perfect for applications that need sophisticated color selection capabilities.

ColorSwatch

Alongside the ColorPicker, we've added the ColorSwatch component for previewing colors. This simple yet powerful component makes it easy to display color samples in your UI.

New Examples

Input Masking

We showcase how to compose the use-mask-input library with the Input component to mask input values. This is particularly useful for formatting phone numbers and credit card numbers.

CLI Improvements

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

New --all Flag

By default, the CLI installs a curated set of recommended snippets including Provider, Avatar, Button, Checkbox, Radio, Input Group, Slider, Popover, Dialog, Drawer, Tooltip, and Field.

You can now use the --all flag to install all available snippets instead of just the recommended ones.

Bug Fixes

This release also includes important bug fixes:

• Fixed an issue where mergeConfigs was mutating the underlying configs
• Resolved a problem where typegen wasn't working when the CLI was installed globally or run using npx

Upgrading

To upgrade to the latest version, run:

npm install @chakra-ui/react@latest