Meta tags:

Headings (most frequently used words):

transition, examples, transitions, components, installation, basic, example, component, api, styled, forms, different, enter, leave, coordinating, multiple, transitioning, on, initial, mount, transitionchild, data, attributes,

Text of the page (most frequently used words):
the (56), transition (53), data (30), open (19), and (18), enter (16), leave (16), closed (15), component (13), show (11), div (11), styles (11), #transitionchild (10), transitioning (10), button (10), react (10), from (10), which (9), setopen (9), import (9), example (8), you (8), when (8), callback (8), called (8), void (8), usestate (8), attributes (7), out (7), element (7), should (7), examples (6), initial (6), transitions (6), different (6), before (6), whether (6), true (6), false (6), prop (6), will (6), duration (6), classname (6), parent (6), with (6), this (5), boolean (5), 300 (5), onclick (5), headlessui (5), all (4), mount (4), for (4), components (4), present (4), after (4), finished (4), start (4), state (4), appear (4), opacity (4), return (4), const (4), function (4), rendered (4), that (4), point (4), use (4), tailwind (3), api (3), multiple (3), headless (3), css (3), description (3), attribute (3), hidden (3), based (3), child (3), render (3), fade (3), ease (3), toggle (3), conditionally (3), need (3), same (3), translate (3), full (3), elements (3), also (3), specify (3), clsx (3), apply (3), styled (2), coordinating (2), basic (2), installation (2), page (2), more (2), predesigned (2), them (2), well (2), using (2), afterleave (2), beforeleave (2), afterenter (2), beforeenter (2), unmounted (2), unmount (2), run (2), string (2), fragment (2), default (2), children (2), want (2), its (2), time (2), automatically (2), but (2), fixed (2), inset (2), left (2), sidebar (2), backdrop (2), nested (2), can (2), wrapping (2), combines (2), starting (2), ending (2), leaving (2), entering (2), install (2), npm (2), 2026, labs, inc, rights, reserved, explore, great, way, support, our, work, source, projects, like, makes, possible, improve, keep, maintained, interested, check, collection, beautifully, designed, expertly, crafted, built, plus, shown, useful, something, load, very, first, set, always, wait, finish, unmounting, don, manage, any, timing, yourself, has, exact, since, value, controlled, white, slide, black, controls, related, each, needs, own, communicate, inherit, sometimes, animations, say, user, clicks, slides, over, screen, uses, durations, right, 100, shared, absolute, border, base, relative, complex, stages, defined, used, then, native, animation, specifying, targeting, exposes, wrap, indicate, get, started, via, code, preview, control, including, classes, textarea, switch, select, radio, group, listbox, input, fieldset, combobox, checkbox, forms, tabs, popover, dialog, disclosure, dropdown, menu, vue,

Text of the page (random words):
transition headless ui v2 1 react vue components dropdown menu disclosure dialog popover tabs transition forms button checkbox combobox fieldset input listbox radio group select switch textarea transition control the transition styles of conditionally rendered elements including nested child transitions using css classes preview code installation to get started install headless ui via npm npm install headlessui react basic example to transition a conditionally rendered element wrap it in the transition component and use the show prop to indicate whether it is open or closed then use native css transition styles to apply an animation specifying the element s closed styles by targeting the data closed attribute that the transition component exposes import transition from headlessui react import usestate from react function example const open setopen usestate false return button onclick setopen open open toggle button transition show open div classname transition duration 300 ease in data closed opacity 0 i will fade in and out div transition styles defined with the data closed attribute will be used as the starting point when transitioning in as well as the ending point when transitioning out for more complex transitions you can also use the data enter data leave and data transition attributes to apply styles at the different stages of the transition examples different enter leave transitions use the data enter and data leave attributes to apply different transition styles when entering and leaving import transition from headlessui react import clsx from clsx import usestate from react function example const open setopen usestate false return div classname relative button onclick setopen open open toggle button transition show open div classname clsx base styles absolute w 48 border transition ease in out shared closed styles data closed opacity 0 entering styles data enter duration 100 data enter data closed translate x full leaving styles data leave duration 300 data leave data closed translate x full i will enter from the left and leave to the right div transition div this example combines the data enter and data closed attributes to specify the starting point of the enter transition and combines the data leave and data closed attributes to specify the ending point of the leave transition it also uses the data enter and data leave attributes to specify different enter and leave durations coordinating multiple transitions sometimes you need to transition multiple elements with different animations but all based on the same state for example say the user clicks a button to open a sidebar that slides over the screen and you also need to fade in a backdrop at the same time you can do this by wrapping the related elements with a parent transition component and wrapping each child that needs its own transition styles with a transitionchild component which will automatically communicate with the parent transition and inherit the parent s open state import transition transitionchild from headlessui react import usestate from react function example const open setopen usestate false return button onclick setopen true open button the show prop controls all nested transitionchild components transition show open backdrop transitionchild div classname fixed inset 0 bg black 30 transition duration 300 data closed opacity 0 onclick setopen false transitionchild slide in sidebar transitionchild div classname fixed inset y 0 left 0 w 64 bg white transition duration 300 data closed translate x full div transitionchild transition the transitionchild component has the exact same api as the transition component but with no show prop since the show value is controlled by the parent parent transition components will always automatically wait for all children to finish transitioning before unmounting so you don t need to manage any of that timing yourself transitioning on initial mount if you want an element to transition the very first time it s rendered set the appear prop to true this is useful if you want something to transition in on initial page load or when its parent is conditionally rendered import transition from headlessui react import usestate from react function example const open setopen usestate true return button onclick setopen open open toggle button transition show open appear true div classname transition duration 300 ease in data closed opacity 0 i will fade in on initial render div transition component api transition prop default description as fragment string component the element or component the transition should render as show boolean whether the children should be shown or hidden appear false boolean whether the transition should run on initial mount unmount true boolean whether the element should be unmounted or hidden based on the show state beforeenter void callback which is called before we start the enter transition afterenter void callback which is called after we finished the enter transition beforeleave void callback which is called before we start the leave transition afterleave void callback which is called after we finished the leave transition transitionchild prop default description as fragment string component the element or component the transition child should render as appear false boolean whether the transition should run on initial mount unmount true boolean whether the element should be unmounted or hidden based on the show state beforeenter void callback which is called before we start the enter transition afterenter void callback which is called after we finished the enter transition beforeleave void callback which is called before we start the leave transition afterleave void callback which is called after we finished the leave transition data attributes attribute description data closed present before transitioning in and when transitioning out data enter present when transitioning in data leave present when transitioning out data transition present when transitioning in or out styled examples if you re interested in predesigned tailwind css component examples using headless ui check out tailwind plus a collection of beautifully designed and expertly crafted components built by us it s a great way to support our work on open source projects like this and makes it possible for us to improve them and keep them well maintained explore more predesigned examples on this page installation basic example examples different enter leave transitions coordinating multiple transitions transitioning on initial mount component api transition transitionchild data attributes styled examples 2026 tailwind labs inc all rights reserved