We're excited to announce the release of Chakra UI v3.16. This release brings new features including the overlay manager component, and improvements to enhance your development experience.

Overlay Manager

When building modern web applications, you'll often need to display temporary UI elements that overlay the main content. These elements—typically modals, dialogs, drawers, or alerts—are crucial for user interactions but can be challenging to manage programmatically.

With Chakra UI's Overlay Manager, you can:

• Open and close overlays from anywhere in your codebase
• Pass data to overlays and receive return values
• Update overlay content without re-rendering the entire component
• Manage multiple overlays with a controlled lifecycle

The foundation of the overlay manager is the createOverlay function

import { Button, Dialog, Portal, createOverlay } from "@chakra-ui/react"

interface DialogProps {
  title: string
  description?: string
  content?: React.ReactNode
}

const dialog = createOverlay<DialogProps>((props) => {
  const { title, description, content, ...rest } = props
  return (
    <Dialog.Root {...rest}>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            {title && (
              <Dialog.Header>
                <Dialog.Title>{title}</Dialog.Title>
              </Dialog.Header>
            )}
            <Dialog.Body spaceY="4">
              {description && (
                <Dialog.Description>{description}</Dialog.Description>
              )}
              {content}
            </Dialog.Body>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  )
})

Once you've created the overlay, you can use it in your component:

export const MyComponent = () => {
  return (
    <>
      <Button
        onClick={() => {
          dialog.open("a", {
            title: "Dialog Title",
            description: "Dialog Description",
          })
        }}
      >
        Open Modal
      </Button>
      <dialog.Viewport />
    </>
  )
}

The <dialog.Viewport /> component is crucial—it's where your overlay will be rendered. Don't forget to include it in your component tree.

Other Improvements

• Global CSS: We've improved text selection contrast for all color palettes

• System: Add support for borderEnd shorthand style prop.

<Box borderEnd="2px solid red">
  <Text>Hello</Text>
</Box>

• All components: Soften the focus ring for all color palettes, making it a bit more subtle.

Upgrading

To upgrade to the latest version, run:

npm install @chakra-ui/react@latest