# Headless UI v2.1: Simplified transition API and improved multi-dialog support

DevFeed: [Headless UI v2.1: Simplified transition API and improved multi-dialog support](<https://devfeed.tech/articles/headless-ui-v2-1-simplified-transition-api-and-improved-multi-dialog-support-3457.md>)

Original publisher: [Read original article](<https://tailwindcss.com/blog/2024-06-21-headless-ui-v2-1>)

Published: 2024-06-21T15:00:00Z

Content type: release

Language: en

Sources: [Tailwind CSS Blog](<https://devfeed.tech/sources/tailwind-css-blog.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [dialog](<https://devfeed.tech/topics/dialog.md>), [React UI animations](<https://devfeed.tech/topics/react-ui-animations.md>)

Tags: [compatibility](<https://devfeed.tech/tags/compatibility.md>), [components](<https://devfeed.tech/tags/components.md>), [dialog](<https://devfeed.tech/tags/dialog.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [install](<https://devfeed.tech/tags/install.md>), [react](<https://devfeed.tech/tags/react.md>)

## AI overview

Headless UI v2.1 for React simplifies transition APIs with a new prop and data attributes for transition stages. It also supports rendering multiple sibling dialogs, with the most recently opened dialog closing on Escape or outside clicks.

## Source excerpt

We just released Headless UI v2.1 for React, which dramatically simplifies our transition APIs and adds support for rendering multiple dialogs as siblings. We've made transitions way easier in v2.1 by adding a new prop to all of the built-in components you might want to transition, and adding data attributes for each transition stage so you can add transition styles by just throwing some classes on the target element: There are four data attributes you can use to target the different stages of...