Build faster with Premium Chakra UI Components 💎

Learn more
release·

November 21, 2024

Chakra 3.2

SA

Segun Adebayo

@thesegunadebayo

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.

"use client"

import { HStack, parseColor } from "@chakra-ui/react"
import {
  ColorPickerArea,
  ColorPickerContent,
  ColorPickerControl,
  ColorPickerEyeDropper,
  ColorPickerInput,
  ColorPickerLabel,
  ColorPickerRoot,
  ColorPickerSliders,
  ColorPickerTrigger,
} from "@/components/ui/color-picker"

const Demo = () => {
  return (
    <ColorPickerRoot defaultValue={parseColor("#eb5e41")} maxW="200px">
      <ColorPickerLabel>Color</ColorPickerLabel>
      <ColorPickerControl>
        <ColorPickerInput />
        <ColorPickerTrigger />
      </ColorPickerControl>
      <ColorPickerContent>
        <ColorPickerArea />
        <HStack>
          <ColorPickerEyeDropper />
          <ColorPickerSliders />
        </HStack>
      </ColorPickerContent>
    </ColorPickerRoot>
  )
}

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.

import { HStack } from "@chakra-ui/react"
import { ColorSwatch } from "@chakra-ui/react"
import { For } from "@chakra-ui/react"

const Demo = () => {
  return (
    <HStack>
      <For each={["2xs", "xs", "sm", "md", "lg", "xl", "2xl"]}>
        {(size) => <ColorSwatch key={size} value="#bada55" size={size} />}
      </For>
    </HStack>
  )
}

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.

"use client"

import { Input } from "@chakra-ui/react"
import { withMask } from "use-mask-input"

const Demo = () => {
  return (
    <Input placeholder="(99) 99999-9999" ref={withMask("(99) 99999-9999")} />
  )
}

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:

Upgrading

To upgrade to the latest version, run:

npm install @chakra-ui/react@latest