Chakra 3.3

release·

January 9, 2025

Segun Adebayo

@thesegunadebayo

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.

import { QrCode } from "@/components/ui/qr-code"

const Demo = () => {
  return <QrCode value="https://www.google.com" />
}

New Examples

File Upload with Paste Event

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

"use client"

import {
  FileUpload,
  FileUploadItemPreviewImage,
  Float,
  HStack,
  Input,
  type InputProps,
  useFileUploadContext,
} from "@chakra-ui/react"
import { HiX } from "react-icons/hi"

const FilePasteInput = (props: InputProps) => {
  const fileUpload = useFileUploadContext()
  return (
    <Input
      {...props}
      onPaste={(e) => {
        fileUpload.setClipboardFiles(e.clipboardData)
      }}
    />
  )
}

const FileImageList = () => {
  const fileUpload = useFileUploadContext()
  return (
    <HStack wrap="wrap" gap="3">
      {fileUpload.acceptedFiles.map((file) => (
        <FileUpload.Item
          p="2"
          width="auto"
          key={file.name}
          file={file}
          pos="relative"
        >
          <Float placement="top-start">
            <FileUpload.ItemDeleteTrigger
              p="0.5"
              rounded="l1"
              bg="bg"
              borderWidth="1px"
            >
              <HiX />
            </FileUpload.ItemDeleteTrigger>
          </Float>
          <FileUploadItemPreviewImage
            boxSize="12"
            rounded="l1"
            objectFit="cover"
          />
        </FileUpload.Item>
      ))}
    </HStack>
  )
}

const Demo = () => {
  return (
    <FileUpload.Root maxFiles={3} accept="image/*">
      <FileUpload.HiddenInput />
      <FileImageList />
      <FilePasteInput placeholder="Paste image here..." />
    </FileUpload.Root>
  )
}

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

Item0

Item1

Item2

Item3

Item4

Item5

import { Box, Center, Flex, Text } from "@chakra-ui/react"
import {
  MenuContent,
  MenuItem,
  MenuRoot,
  MenuTrigger,
} from "@/components/ui/menu"

const Demo = () => {
  return (
    <Center minH="sm">
      <Flex
        w="300px"
        h="full"
        overflowX="auto"
        gapX="6"
        p="4"
        borderWidth="1px"
        bg="bg.subtle"
      >
        {[...Array(6).keys()].map((x) => (
          <Box layerStyle="fill.surface" p="4" borderRadius="md" key={x}>
            <Text>Item{x}</Text>
          </Box>
        ))}
        <Box>
          <MenuRoot positioning={{ hideWhenDetached: true }}>
            <MenuTrigger asChild>
              <Box as="button" bg="green.100" p="4" borderRadius="md">
                Menu
              </Box>
            </MenuTrigger>
            <MenuContent>
              <MenuItem value="new-txt">New Text File</MenuItem>
              <MenuItem value="new-file">New File...</MenuItem>
              <MenuItem value="new-win">New Window</MenuItem>
              <MenuItem value="open-file">Open File...</MenuItem>
              <MenuItem value="export">Export</MenuItem>
            </MenuContent>
          </MenuRoot>
        </Box>
      </Flex>
    </Center>
  )
}

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.

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:

npm install @chakra-ui/react@latest