Headless UI v2.1 for React introduces a simplified transition API and sibling multi-dialog support.
- •A new transition prop is added to built-in components, replacing the need for separate Transition wrappers in most cases
- •Four data attributes control transition stages: data-closed (from/to styles), data-enter, data-leave, and data-transition
- •Attributes can be stacked to define different enter and leave animations (e.g., slide in from left, slide out to right)
- •The <Transition> component still works for plain HTML elements but now also supports the new data attribute API
- •Multiple dialogs can now be rendered as siblings without nesting; the last-opened dialog handles Escape and outside-click dismissal
This summary was automatically generated by AI based on the original article and may not be fully accurate.
Tailwind CSS
CSS-Tricks
WebKit