PageSourceSearch

https://headlessui.com/react/dialog

html headlessui.com collected 2026-10-03 21:56:18 UTC 172,083 bytes, 358 lines download raw bytes

1<!DOCTYPE html><html lang="en" class="h-full bg-black"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>Dialog - Headless UI</title><meta name="twitter:site" content="@tailwindlabs"/><meta name="twitter:description" content="Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS."/><meta name="twitter:creator" content="@tailwindlabs"/><meta property="og:url" content="https://headlessui.com/"/><meta property="og:type" content="article"/><meta property="og:description" content="Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS."/><meta property="og:image" content="https://headlessui.com/_next/static/media/social-card.46834755.jpg"/><meta name="twitter:title" content="Headless UI"/><meta property="og:title" content="Headless UI"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:image" content="https://headlessui.com/_next/static/media/social-card.46834755.jpg"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/site.webmanifest"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/><meta name="next-head-count" content="20"/><link rel="stylesheet" href="https://rsms.me/inter/inter.css"/><link rel="preload" href="/_next/static/css/ba0148c27325b1bf.css" as="style"/><link rel="stylesheet" href="/_next/static/css/ba0148c27325b1bf.css" data-n-g=""/><noscript data-n-css=""></noscript>
1<script defer="" nomodule="" src="/_next/static/chunks/polyfills-42372ed130431b0a.js"></script>
1<script src="/_next/static/chunks/webpack-87b3a303122f2f0d.js" defer=""></script>
1<script src="/_next/static/chunks/framework-64ad27b21261a9ce.js" defer=""></script>
1<script src="/_next/static/chunks/main-7cee4df245061683.js" defer=""></script>
1<script src="/_next/static/chunks/pages/_app-90124017042833aa.js" defer=""></script>
1<script src="/_next/static/chunks/849-a7bad3e07a0c5c70.js" defer=""></script>
1<script src="/_next/static/chunks/47-0747a7fce7a8aa10.js" defer=""></script>
1<script src="/_next/static/chunks/pages/react/dialog-58d223f41288bf0c.js" defer=""></script>
1<script src="/_next/static/RjS1956bWjcD5dMgv9O1y/_buildManifest.js" defer=""></script>
1<script src="/_next/static/RjS1956bWjcD5dMgv9O1y/_ssgManifest.js" defer=""></script>
1</head><body class="relative min-h-full antialiased"><div id="__next"><div class="scheme-dark"><button class="fixed right-4 bottom-4 z-30 flex size-16 items-center justify-center rounded-full border border-white/20 bg-white/20 backdrop-blur lg:hidden" aria-label="Open site navigation" type="button" data-headlessui-state=""><svg class="size-6 stroke-white" fill="none"><path d="M4 8h16M4 16h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><span hidden="" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;display:none"></span><div class="relative"><header class="relative px-4 sm:px-6"><div class="mx-auto flex max-w-7xl items-center justify-between px-2 py-6"><div class="flex items-center gap-4 sm:gap-5"><a aria-label="Headless UI home page" href="/"><svg class="sm:hidden h-8" viewBox="0 0 32 32" aria-hidden="true"><path d="M6.33447 19.8829L25.8545 13.3649C25.4645 10.9249 25.1865 9.29494 24.8645 8.05094C24.5175 6.71294 24.2425 6.35494 24.1345 6.23094C23.7581 5.80015 23.2895 5.45972 22.7635 5.23494C22.6115 5.16994 22.1855 5.01894 20.8075 5.10194C19.3495 5.18994 17.4355 5.48794 14.4045 5.96794C11.3745 6.44794 9.46147 6.75694 8.04847 7.12294C6.71147 7.46994 6.35247 7.74594 6.22847 7.85394C5.79847 8.23094 5.45847 8.69894 5.23347 9.22494C5.16847 9.37694 5.01747 9.80294 5.10047 11.1819C5.18847 12.6399 5.48647 14.5549 5.96647 17.5859C6.10047 18.4359 6.22147 19.1959 6.33447 19.8829Z" class="fill-sky-300 forced-colors:fill-[CanvasText]"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M0.952696 18.3799C0.0246956 12.5159 -0.440304 9.58392 0.565696 7.22992C1.09011 6.0022 1.88446 4.90844 2.8897 4.02992C4.8167 2.34692 7.7477 1.88292 13.6097 0.953917C19.4737 0.0239174 22.4057 -0.440083 24.7597 0.565917C25.9867 1.0905 27.0798 1.88484 27.9577 2.88992C29.6417 4.81792 30.1057 7.74992 31.0337 13.6149C31.9627 19.4789 32.4267 22.4119 31.4207 24.7649C30.8966 25.9926 30.1026 27.0863 29.0977 27.9649C27.1707 29.6489 24.2387 30.1129 18.3757 31.0419C12.5137 31.9709 9.5817 32.4349 7.2287 31.4289C6.00166 30.9043 4.9086 30.11 4.0307 29.1049C2.3467 27.1769 1.8817 24.2449 0.952696 18.3799ZM11.2937 28.7939C12.8637 28.6989 14.8857 28.3819 17.8787 27.9079C20.8727 27.4339 22.8917 27.1099 24.4157 26.7149C25.8907 26.3319 26.5707 25.9589 27.0097 25.5749C27.6556 25.0101 28.1659 24.307 28.5027 23.5179C28.7327 22.9819 28.8777 22.2199 28.7857 20.6979C28.6907 19.1279 28.3737 17.1049 27.8997 14.1109C27.4257 11.1169 27.1027 9.09592 26.7077 7.57292C26.3247 6.09692 25.9507 5.41692 25.5677 4.97792C25.0033 4.33179 24.3006 3.82114 23.5117 3.48392C22.9757 3.25392 22.2137 3.10892 20.6917 3.20092C19.1217 3.29592 17.1007 3.61292 14.1077 4.08692C11.1137 4.56192 9.0937 4.88492 7.5707 5.27992C6.0947 5.66292 5.4157 6.03692 4.9767 6.41992C4.33049 6.98465 3.81985 7.68772 3.4827 8.47692C3.2537 9.01292 3.1087 9.77492 3.2007 11.2969C3.2957 12.8679 3.6117 14.8899 4.0867 17.8839C4.5607 20.8779 4.8837 22.8989 5.2787 24.4219C5.6617 25.8979 6.0347 26.5779 6.4187 27.0169C6.98311 27.663 7.68585 28.1737 8.4747 28.5109C9.0107 28.7409 9.7707 28.8859 11.2937 28.7939Z" class="fill-sky-300 forced-colors:fill-[CanvasText]"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M109.707 6.02002V25H112.515V6.02002H109.707ZM153.582 18.9681C153.582 22.8941 156.468 25.338 160.472 25.338C164.45 25.338 167.362 22.8941 167.362 18.9681V6.80005H164.372V18.786C164.372 20.918 163.15 22.4261 160.472 22.4261C157.794 22.4261 156.572 20.918 156.572 18.786V6.80005H153.582V18.9681ZM173.791 6.80005H170.801V25H173.791V6.80005ZM144.119 15.5881C144.119 16.5634 145.308 16.8937 146.705 17.282C148.697 17.8355 151.113 18.5069 151.113 21.3341C151.113 23.9341 148.851 25.3381 146.043 25.3381C143.443 25.3381 141.571 24.1681 140.739 22.2961L143.157 20.8921C143.573 22.0621 144.613 22.7641 146.043 22.7641C147.291 22.7641 148.253 22.3481 148.253 21.3081C148.253 20.3512 147.057 20.0123 145.654 19.6148C143.665 19.0511 141.259 18.3695 141.259 15.6401C141.259 13.1961 143.365 11.6621 146.017 11.6621C148.149 11.6621 149.917 12.6501 150.827 14.3661L148.461 15.6921C147.993 14.6781 147.083 14.2101 146.017 14.2101C145.003 14.2101 144.119 14.6521 144.119 15.5881ZM135.508 17.282C134.111 16.8937 132.922 16.5634 132.922 15.5881C132.922 14.6521 133.806 14.2101 134.82 14.2101C135.886 14.2101 136.796 14.6781 137.264 15.6921L139.63 14.3661C138.72 12.6501 136.952 11.6621 134.82 11.6621C132.168 11.6621 130.062 13.1961 130.062 15.6401C130.062 18.3695 132.468 19.0511 134.457 19.6148C135.86 20.0123 137.056 20.3512 137.056 21.3081C137.056 22.3481 136.094 22.7641 134.846 22.7641C133.416 22.7641 132.376 22.0621 131.96 20.8921L129.542 22.2961C130.374 24.1681 132.246 25.3381 134.846 25.3381C137.654 25.3381 139.916 23.9341 139.916 21.3341C139.916 18.5069 137.5 17.8355 135.508 17.282ZM117.985 19.6961C118.427 21.7241 120.065 22.7641 122.145 22.7641C123.705 22.7641 124.875 22.0621 125.499 21.1521L127.813 22.5041C126.617 24.2721 124.667 25.3381 122.119 25.3381C117.829 25.3381 115.047 22.4001 115.047 18.5001C115.047 14.6521 117.829 11.6621 121.911 11.6621C125.785 11.6621 128.437 14.7821 128.437 18.5261C128.437 18.9161 128.385 19.3321 128.333 19.6961H117.985ZM117.959 17.4081H125.603C125.213 15.1721 123.575 14.2101 121.885 14.2101C119.779 14.2101 118.349 15.4581 117.959 17.4081ZM103.626 6.80005H106.434V25H103.626V23.128C102.638 24.5061 101.104 25.338 99.0756 25.338C95.5396 25.338 92.6016 22.348 92.6016 18.5C92.6016 14.626 95.5396 11.662 99.0756 11.662C101.104 11.662 102.638 12.494 103.626 13.846V6.80005ZM99.5176 22.66C101.858 22.66 103.626 20.918 103.626 18.5C103.626 16.082 101.858 14.34 99.5176 14.34C97.1776 14.34 95.4096 16.082 95.4096 18.5C95.4096 20.918 97.
11776 22.66 99.5176 22.66ZM90.0566 12.0001H87.2486V13.8461C86.2606 12.4941 84.7266 11.6621 82.6986 11.6621C79.1626 11.6621 76.2246 14.6261 76.2246 18.5001C76.2246 22.3481 79.1626 25.3381 82.6986 25.3381C84.7266 25.3381 86.2606 24.5061 87.2486 23.1281V25.0001H90.0566V12.0001ZM87.2486 18.5001C87.2486 20.9181 85.4806 22.6601 83.1406 22.6601C80.8006 22.6601 79.0326 20.9181 79.0326 18.5001C79.0326 16.0821 80.8006 14.3401 83.1406 14.3401C85.4806 14.3401 87.2486 16.0821 87.2486 18.5001ZM64.106 19.6961C64.548 21.7241 66.186 22.7641 68.266 22.7641C69.826 22.7641 70.996 22.0621 71.62 21.1521L73.934 22.5041C72.738 24.2721 70.788 25.3381 68.24 25.3381C63.95 25.3381 61.168 22.4001 61.168 18.5001C61.168 14.6521 63.95 11.6621 68.032 11.6621C71.906 11.6621 74.558 14.7821 74.558 18.5261C74.558 18.9161 74.506 19.3321 74.454 19.6961H64.106ZM64.08 17.4081H71.724C71.334 15.1721 69.696 14.2101 68.006 14.2101C65.9 14.2101 64.47 15.4581 64.08 17.4081ZM58.4402 6.80005H55.4502V14.262H47.6502V6.80005H44.6602V25H47.6502V17.122H55.4502V25H58.4402V6.80005Z" class="fill-white forced-colors:fill-[CanvasText]"></path></svg><svg class="hidden sm:inline h-8" viewBox="0 0 174 32" aria-hidden="true"><path d="M6.33447 19.8829L25.8545 13.3649C25.4645 10.9249 25.1865 9.29494 24.8645 8.05094C24.5175 6.71294 24.2425 6.35494 24.1345 6.23094C23.7581 5.80015 23.2895 5.45972 22.7635 5.23494C22.6115 5.16994 22.1855 5.01894 20.8075 5.10194C19.3495 5.18994 17.4355 5.48794 14.4045 5.96794C11.3745 6.44794 9.46147 6.75694 8.04847 7.12294C6.71147 7.46994 6.35247 7.74594 6.22847 7.85394C5.79847 8.23094 5.45847 8.69894 5.23347 9.22494C5.16847 9.37694 5.01747 9.80294 5.10047 11.1819C5.18847 12.6399 5.48647 14.5549 5.96647 17.5859C6.10047 18.4359 6.22147 19.1959 6.33447 19.8829Z" class="fill-sky-300 forced-colors:fill-[CanvasText]"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M0.952696 18.3799C0.0246956 12.5159 -0.440304 9.58392 0.565696 7.22992C1.09011 6.0022 1.88446 4.90844 2.8897 4.02992C4.8167 2.34692 7.7477 1.88292 13.6097 0.953917C19.4737 0.0239174 22.4057 -0.440083 24.7597 0.565917C25.9867 1.0905 27.0798 1.88484 27.9577 2.88992C29.6417 4.81792 30.1057 7.74992 31.0337 13.6149C31.9627 19.4789 32.4267 22.4119 31.4207 24.7649C30.8966 25.9926 30.1026 27.0863 29.0977 27.9649C27.1707 29.6489 24.2387 30.1129 18.3757 31.0419C12.5137 31.9709 9.5817 32.4349 7.2287 31.4289C6.00166 30.9043 4.9086 30.11 4.0307 29.1049C2.3467 27.1769 1.8817 24.2449 0.952696 18.3799ZM11.2937 28.7939C12.8637 28.6989 14.8857 28.3819 17.8787 27.9079C20.8727 27.4339 22.8917 27.1099 24.4157 26.7149C25.8907 26.3319 26.5707 25.9589 27.0097 25.5749C27.6556 25.0101 28.1659 24.307 28.5027 23.5179C28.7327 22.9819 28.8777 22.2199 28.7857 20.6979C28.6907 19.1279 28.3737 17.1049 27.8997 14.1109C27.4257 11.1169 27.1027 9.09592 26.7077 7.57292C26.3247 6.09692 25.9507 5.41692 25.5677 4.97792C25.0033 4.33179 24.3006 3.82114 23.5117 3.48392C22.9757 3.25392 22.2137 3.10892 20.6917 3.20092C19.1217 3.29592 17.1007 3.61292 14.1077 4.08692C11.1137 4.56192 9.0937 4.88492 7.5707 5.27992C6.0947 5.66292 5.4157 6.03692 4.9767 6.41992C4.33049 6.98465 3.81985 7.68772 3.4827 8.47692C3.2537 9.01292 3.1087 9.77492 3.2007 11.2969C3.2957 12.8679 3.6117 14.8899 4.0867 17.8839C4.5607 20.8779 4.8837 22.8989 5.2787 24.4219C5.6617 25.8979 6.0347 26.5779 6.4187 27.0169C6.98311 27.663 7.68585 28.1737 8.4747 28.5109C9.0107 28.7409 9.7707 28.8859 11.2937 28.7939Z" class="fill-sky-300 forced-colors:fill-[CanvasText]"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M109.707 6.02002V25H112.515V6.02002H109.707ZM153.582 18.9681C153.582 22.8941 156.468 25.338 160.472 25.338C164.45 25.338 167.362 22.8941 167.362 18.9681V6.80005H164.372V18.786C164.372 20.918 163.15 22.4261 160.472 22.4261C157.794 22.4261 156.572 20.918 156.572 18.786V6.80005H153.582V18.9681ZM173.791 6.80005H170.801V25H173.791V6.80005ZM144.119 15.5881C144.119 16.5634 145.308 16.8937 146.705 17.282C148.697 17.8355 151.113 18.5069 151.113 21.3341C151.113 23.9341 148.851 25.3381 146.043 25.3381C143.443 25.3381 141.571 24.1681 140.739 22.2961L143.157 20.8921C143.573 22.0621 144.613 22.7641 146.043 22.7641C147.291 22.7641 148.253 22.3481 148.253 21.3081C148.253 20.3512 147.057 20.0123 145.654 19.6148C143.665 19.0511 141.259 18.3695 141.259 15.6401C141.259 13.1961 143.365 11.6621 146.017 11.6621C148.149 11.6621 149.917 12.6501 150.827 14.3661L148.461 15.6921C147.993 14.6781 147.083 14.2101 146.017 14.2101C145.003 14.2101 144.119 14.6521 144.119 15.5881ZM135.508 17.282C134.111 16.8937 132.922 16.5634 132.922 15.5881C132.922 14.6521 133.806 14.2101 134.82 14.2101C135.886 14.2101 136.796 14.6781 137.264 15.6921L139.63 14.3661C138.72 12.6501 136.952 11.6621 134.82 11.6621C132.168 11.6621 130.062 13.1961 130.062 15.6401C130.062 18.3695 132.468 19.0511 134.457 19.6148C135.86 20.0123 137.056 20.3512 137.056 21.3081C137.056 22.3481 136.094 22.7641 134.846 22.7641C133.416 22.7641 132.376 22.0621 131.96 20.8921L129.542 22.2961C130.374 24.1681 132.246 25.3381 134.846 25.3381C137.654 25.3381 139.916 23.9341 139.916 21.3341C139.916 18.5069 137.5 17.8355 135.508 17.282ZM117.985 19.6961C118.427 21.7241 120.065 22.7641 122.145 22.7641C123.705 22.7641 124.875 22.0621 125.499 21.1521L127.813 22.5041C126.617 24.2721 124.667 25.3381 122.119 25.3381C117.829 25.3381 115.047 22.4001 115.047 18.5001C115.047 14.6521 117.829 11.6621 121.911 11.6621C125.785 11.6621 128.437 14.7821 128.437 18.5261C128.437 18.9161 128.385 19.3321 128.333 19.6961H117.985ZM117.959 17.4081H125.603C125.213 15.1721 123.575 14.2101 121.885 14.2101C119.779 14.2101 118.349 15.4581 117.959 17.4081ZM103.626 6.80005H106.434V25H103.626V23.128C102.638 24.5061 101.104 25.338 99.0756 25.338C95.5396 25.338 92.6016 22.348 92.6016 18.5C92.6016 14.626 95.5396 11.662 99.0756 11.662C101.104 11.662 102.638 12.494 103.626 13.846V6.80005ZM99.5176 22.66C101.858 22.66 103.626 20.918 103.626 18.5C103.626 16.082 101.858 14.34 99.5176 14.34C97.1776 14.34 95.4096 16.082 95.4096 18.5C95.4096 20.918 97.
11776 22.66 99.5176 22.66ZM90.0566 12.0001H87.2486V13.8461C86.2606 12.4941 84.7266 11.6621 82.6986 11.6621C79.1626 11.6621 76.2246 14.6261 76.2246 18.5001C76.2246 22.3481 79.1626 25.3381 82.6986 25.3381C84.7266 25.3381 86.2606 24.5061 87.2486 23.1281V25.0001H90.0566V12.0001ZM87.2486 18.5001C87.2486 20.9181 85.4806 22.6601 83.1406 22.6601C80.8006 22.6601 79.0326 20.9181 79.0326 18.5001C79.0326 16.0821 80.8006 14.3401 83.1406 14.3401C85.4806 14.3401 87.2486 16.0821 87.2486 18.5001ZM64.106 19.6961C64.548 21.7241 66.186 22.7641 68.266 22.7641C69.826 22.7641 70.996 22.0621 71.62 21.1521L73.934 22.5041C72.738 24.2721 70.788 25.3381 68.24 25.3381C63.95 25.3381 61.168 22.4001 61.168 18.5001C61.168 14.6521 63.95 11.6621 68.032 11.6621C71.906 11.6621 74.558 14.7821 74.558 18.5261C74.558 18.9161 74.506 19.3321 74.454 19.6961H64.106ZM64.08 17.4081H71.724C71.334 15.1721 69.696 14.2101 68.006 14.2101C65.9 14.2101 64.47 15.4581 64.08 17.4081ZM58.4402 6.80005H55.4502V14.262H47.6502V6.80005H44.6602V25H47.6502V17.122H55.4502V25H58.4402V6.80005Z" class="fill-white forced-colors:fill-[CanvasText]"></path></svg></a><button class="flex items-center gap-0.5 rounded-2xl bg-white/10 py-0.5 pr-1.5 pl-3 backdrop-blur-sm hover:bg-white/15 data-active:bg-white/15" aria-label="Select version of library" id="headlessui-menu-button-:R1sjm:" type="button" aria-haspopup="menu" aria-expanded="false" data-headlessui-state=""><div class="text-sm/6 font-medium text-white">v2.1</div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon" class="size-4 fill-white/50"><path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></button></div><a aria-label="View project on GitHub" href="https://github.com/tailwindlabs/headlessui"><svg class="h-6 fill-white" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0C5.37 0 0 5.37 0 12C0 17.31 3.435 21.795 8.205 23.385C8.805 23.49 9.03 23.13 9.03 22.815C9.03 22.53 9.015 21.585 9.015 20.58C6 21.135 5.22 19.845 4.98 19.17C4.845 18.825 4.26 17.76 3.75 17.475C3.33 17.25 2.73 16.695 3.735 16.68C4.68 16.665 5.355 17.55 5.58 17.91C6.66 19.725 8.385 19.215 9.075 18.9C9.18 18.12 9.495 17.595 9.84 17.295C7.17 16.995 4.38 15.96 4.38 11.37C4.38 10.065 4.845 8.985 5.61 8.145C5.49 7.845 5.07 6.615 5.73 4.965C5.73 4.965 6.735 4.65 9.03 6.195C9.99 5.925 11.01 5.79 12.03 5.79C13.05 5.79 14.07 5.925 15.03 6.195C17.325 4.635 18.33 4.965 18.33 4.965C18.99 6.615 18.57 7.845 18.45 8.145C19.215 8.985 19.68 10.05 19.68 11.37C19.68 15.975 16.875 16.995 14.205 17.295C14.64 17.67 15.015 18.39 15.015 19.515C15.015 21.12 15 22.41 15 22.815C15 23.13 15.225 23.505 15.825 23.385C18.2072 22.5808 20.2773 21.0498 21.7438 19.0074C23.2103 16.9651 23.9994 14.5143 24 12C24 5.37 18.63 0 12 0Z"></path></svg></a></div></header><div class="-z-10 h-0 max-lg:relative lg:sticky lg:top-0" aria-hidden="true"><div class="absolute inset-0 -mt-20 h-[calc(100svh+5rem)] bg-position-[35%_top] bg-no-repeat sm:bg-position-[38%_top] md:bg-position-[40%_top] lg:bg-position-[44%_top] xl:bg-top forced-colors:hidden" style="background-image:url(/_next/static/media/bg-top.c54a3f7e.jpg)"></div></div><div class="absolute inset-0 -z-10 bg-position-[35%_bottom] bg-no-repeat mix-blend-screen sm:bg-position-[38%_bottom] md:bg-position-[40%_bottom] lg:bg-position-[44%_bottom] xl:bg-bottom forced-colors:hidden" style="background-image:url(/_next/static/media/bg-bottom.e4e0724b.jpg)" aria-hidden="true"></div><div class="pointer-events-none absolute inset-0 z-10 px-4 sm:px-6" aria-hidden="true"><div class="mx-auto flex h-full max-w-[calc(var(--container-7xl)+2px)] gap-[14px]"><div class="hidden w-68 border-x border-white/7.5 lg:block"></div><div class="flex-1 border-x border-white/7.5"></div><div class="hidden w-68 border-x border-white/7.5 xl:block"></div></div></div><div class="absolute inset-0 -z-10 bg-top opacity-10 forced-colors:hidden" style="background-image:url(/_next/static/media/bg-noise.67fd2524.png)" aria-hidden="true"></div><main class="rounded-[2.5rem] bg-black/80 px-4 sm:px-6"><div class="mx-auto flex max-w-7xl"><div class="sticky top-0 hidden h-screen w-68 shrink-0 lg:block lg:pr-px xl:pr-[2px]"><div class="h-full overflow-y-auto pb-[calc(80px+4rem)]"><div class="flex gap-4 px-4 pt-16 pb-8"><div class="rounded-full bg-white/10 px-3 py-1 text-sm/6 font-semibold text-white select-none">
1React</div><a class="rounded-full px-3 py-1 text-sm/6 font-semibold text-white/50 hover:bg-white/5 hover:text-white/75" href="/v1/vue/dialog">Vue</a></div><nav><div class="border-t border-white/7.5 py-7"><h2 class="px-4 pb-4 font-mono text-xs font-semibold tracking-widest text-white/50 uppercase">Components</h2><div class="flex flex-col gap-4 px-4"><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/menu">Dropdown Menu</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/disclosure">Disclosure</a><a data-active="true" class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/dialog">Dialog</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/popover">Popover</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/tabs">Tabs</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/transition">Transition</a></div></div><div class="border-t border-white/7.5 py-7"><h3 class="px-4 pb-4 font-mono text-xs font-semibold tracking-widest text-white/50 uppercase">Forms</h3><div class="flex flex-col gap-4 px-4"><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/button">Button</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/checkbox">Checkbox</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/combobox">Combobox</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/fieldset">Fieldset</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/input">Input</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/listbox">Listbox</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/radio-group">Radio Group</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/select">Select</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/switch">Switch</a><a class="group block px-6 py-2 whitespace-nowrap text-white/80 transition-colors duration-200 hover:text-white data-active:font-semibold data-active:text-white lg:px-0 lg:py-0 lg:text-sm" href="/react/textarea">Textarea</a></div></div></nav></div></div><main class="flex min-w-0 flex-1 pt-16"><div class="mx-auto max-w-184 min-w-0 flex-1 px-2 md:px-8"><div class="prose"><h1>Dialog</h1></div>
2<div class="prose mt-4 mb-6"><p class="text-base/7">A fully-managed, renderless dialog component jam-packed with accessibility and ke
2yboard features, perfect for building
3completely custom dialogs and alerts.</p></div>
4<div class="relative mt-8 mb-12 flex flex-col items-center justify-center overflow-hidden" style="height:400px"><div class="absolute top-0 right-0 z-10 p-2"><div class="flex gap-1 rounded-full bg-black/25 p-1 backdrop-blur-sm"><button data-selected="true" class="rounded-full px-2 py-1 text-xs/4 font-medium text-white hover:bg-white/5 data-selected:bg-white/10">Preview</button><button class="rounded-full px-2 py-1 text-xs/4 font-medium text-white hover:bg-white/5 data-selected:bg-white/10">Code</button></div></div><div class="size-full bg-white/5"><iframe src="/examples/react-dialog" class="size-full [color-scheme:auto]"></iframe></div></div>
5<div class="prose"><h2 class="group whitespace-pre-wrap" id="installation"><a href="#installation" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Installation"></a><span aria-hidden="true">Installation</span></h2><p>To get started, install Headless UI via npm:</p><pre class="language-shell"><code><span class="token function">npm</span> <span class="token function">install</span> @headlessui/react</code></pre><h2 class="group whitespace-pre-wrap" id="basic-example"><a href="#basic-example" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Basic example"></a><span aria-hidden="true">Basic example</span></h2><p>Dialogs are built using the <code>Dialog</code>, <code>DialogPanel</code>, <code>DialogTitle</code>, and <code>Description</code> components:</p><pre class="language-jsx"><code><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Description</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Dialog</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogPanel</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogTitle</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
6<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
7
8<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
9  <span class="token keyword">let</span> <span class="token punctuation">[</span>isOpen<span class="token punctuation">,</span> setIsOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
10
11  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
12    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">></span></span><span class="token plain-text">
13      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Open dialog</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
14      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isOpen<span class="token punctuation">}</span></span> <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">
14false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>relative z-50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
15        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed inset-0 flex w-screen items-center justify-center p-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
16          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogPanel</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>max-w-lg space-y-4 border bg-white p-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
17            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogTitle</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font-bold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text">
18            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text">This will permanently deactivate your account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text">
19            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Are you sure you want to deactivate your account? All of your data will be permanently removed.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">
20            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex gap-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
21              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Cancel</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
22              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">
22false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text">
23            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
24          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
25        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
26      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span><span class="token plain-text">
27    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">></span></span>
28  <span class="token punctuation">)</span>
29<span class="token punctuation">}</span></code></pre><p>How you open and close the dialog is entirely up to you. You open a dialog by passing <code>true</code> to the <code>open</code> prop, and
30close it by passing <code>false</code>. An <code>onClose</code> callback is also required for when the dialog is dismissed by pressing the
31<code>Esc</code> key or by clicking outside of the <code>DialogPanel</code>.</p><h2 class="group whitespace-pre-wrap" id="styling"><a href="#styling" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Styling"></a><span aria-hidden="true">Styling</span></h2><p>Style the <code>Dialog</code> and <code>DialogPanel</code> components using the <code>className</code> or <code>style</code> props like you would with any other
32element. You can also introduce additional elements if needed to achieve a particular design.</p><pre class="language-jsx"><code><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Dialog</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogPanel</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogTitle</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
33<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
34
35<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
36  <span class="token keyword">let</span> <span class="token punctuation">[</span>isOpen<span class="token punctuation">,</span> setIsOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
37
38  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
39<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isOpen<span class="token punctuation">}</span></span> <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">
39false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>relative z-50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed inset-0 flex w-screen items-center justify-center p-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogPanel</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>max-w-lg space-y-4 border bg-white p-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate account order</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
40<span class="token plain-text"></span>
41<span class="token plain-text">          </span><span class="token punctuation">{</span><span class="token comment">/* ... */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
42<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
43<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
44<span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span>
45  <span class="token punctuation">)</span>
46<span class="token punctuation">}</span>
47</code></pre><p>Clicking outside the <code>DialogPanel</code> component will close the dialog, so keep that in mind when deciding which styles to
48apply to which elements.</p><h2 class="group whitespace-pre-wrap" id="examples"><a href="#examples" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Examples"></a><span aria-hidden="true">Examples</span></h2><h3 class="group whitespace-pre-wrap" id="showing-hiding-the-dialog"><a href="#showing-hiding-the-dialog" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Showing/hiding the dialog"></a><span aria-hidden="true">Showing/hiding the dialog</span></h3><p>Dialogs are controlled components, meaning that you have to provide and manage the open state yourself using the <code>open</code>
49prop and the <code>onClose</code> callback.</p><p>The <code>onClose</code> callback is called when an dialog is dismissed, which happens when the user presses the <kbd>Esc</kbd> key
50or clicks outside the <code>DialogPanel</code>. In this callback set the <code>open</code> state back to <code>false</code> to close the dialog.</p><pre class="language-jsx"><code><span class="token keyword module">
50import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Description</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Dialog</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogPanel</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogTitle</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
51<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
52
53<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
54  <span class="token comment">// The open/closed state lives outside of the `Dialog` and is managed by you</span>
55<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div>  <span class="token keyword">let</span> <span class="token punctuation">[</span>isOpen<span class="token punctuation">,</span> setIsOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span></div>
56  <span class="token keyword">function</span> <span class="token keyword">async</span> <span class="token function">handleDeactivate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
57    <span class="token keyword control-flow">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'/deactivate-account'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'POST'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
58<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div>    <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span></div>  <span class="token punctuation">}</span>
59
60  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
61    <span class="token comment">/*</span>
62<span class="token comment">      Pass `isOpen` to the `open` prop, and use `onClose` to set</span>
63<span class="token comment">      the state back to `false` when the user clicks outside of</span>
64<span class="token comment">      the dialog or presses the escape key.</span>
65<span class="token comment">    */</span>
66<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div>    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isOpen<span class="token punctuation">}</span></span> <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">
66false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
67<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
68<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text">This will permanently deactivate your account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
69<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Are you sure you want to deactivate your account? All of your data will be permanently removed.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
70<span class="token plain-text"></span>
71<span class="token plain-text">        </span><span class="token punctuation">{</span><span class="token comment">/*</span>
72<span class="token comment">          You can render additional buttons to dismiss your</span>
73<span class="token comment">          dialog by setting `isOpen` to `false`.</span>
74<span class="token comment">        */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
75<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Cancel</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
76<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleDeactivate<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
77<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
78<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span></div>  <span class="token punctuation">)</span>
79<span class="token punctuation">}</span>
80</code></pre><p>For situations where you don&#x27;t have easy access to your open/close state, Headless UI provides a <code>CloseButton</code> component
81that will close the nearest dialog ancestor when clicked. You can use the <code>as</code> prop to customize which element is being
82rendered:</p><pre class="language-jsx"><code><span class="token keyword module">
82import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">CloseButton</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
83<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MyDialog</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./my-dialog'</span>
84<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">MyButton</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'./my-button'</span>
85
86<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
87  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
88    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MyDialog</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
89<span class="token plain-text">      </span><span class="token punctuation">{</span><span class="token comment">/* ... */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
90<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CloseButton</span></span> <span class="token attr-name">as</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token maybe-class-name">MyButton</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Cancel</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">CloseButton</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MyDialog</span></span><span class="token punctuation">></span></span>
91  <span class="token punctuation">)</span>
92<span class="token punctuation">}</span>
93</code></pre><p>If you require more control, you can also use the <code>useClose</code> hook to imperatively close the dialog, say after running an
94async action:</p><pre class="language-jsx"><code><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Dialog</span><span class="token punctuation">,</span> useClose <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
95
96<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">MySearchForm</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
97<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div>  <span class="token keyword">let</span> close <span class="token operator">=</span> <span class="token function">useClose</span><span class="token punctuation">(</span><span class="token punctuation">)</span></div>
98  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
99    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span>
100      <span class="token attr-name">onSubmit</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
101        event<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
102        <span class="token comment">/* Perform search... */</span>
103<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div>        <span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span></div>      <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
104    <span class="token punctuation">></span></span><span class="token plain-text"></span>
105<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>search<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span>
106<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Submit</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
107<span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
108  <span class="token punctuation">)</span>
109<span class="token punctuation">}</span>
110
111<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
112  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
113    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
114<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MySearchForm</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span>
115<span class="token plain-text">      </span><span class="token punctuation">{</span><span class="token comment">/* ... */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
116<span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span>
117  <span class="token punctuation">)</span>
118<span class="token punctuation">}</span>
119</code></pre><p>The <code>useClose</code> hook must be used in a component that&#x27;s nested within the <code>Dialog</code>, otherwise it will not work.</p><h3 class="group whitespace-pre-wrap" id="adding-a-backdrop"><a href="#adding-a-backdrop" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Adding a backdrop"></a><span aria-hidden="true">Adding a backdrop</span></h3><p>Use the <code>DialogBackdrop</code> component to add a backdrop behind your dialog panel. We recommend making the backdrop a
120sibling to your panel container:</p><pre class="language-jsx"><code><span class="token keyword module">
120import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Description</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Dialog</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogBackdrop</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogPanel</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogTitle</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
121<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
122
123<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
124  <span class="token keyword">let</span> <span class="token punctuation">[</span>isOpen<span class="token punctuation">,</span> setIsOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
125
126  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
127    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
128<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Open dialog</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
129<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isOpen<span class="token punctuation">}</span></span> <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>relative z-50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
130<span class="token plain-text">        </span><span class="token punctuation">{</span><span class="token comment">/* The backdrop, rendered as a fixed sibling to the panel container */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
131<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogBackdrop</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed inset-0 bg-black/30<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span></div><span class="token plain-text"></span>
132<span class="token plain-text">        </span><span class="token punctuation">{</span><span class="token comment">/* Full-screen container to center the panel */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
133<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed inset-0 flex w-screen items-center justify-center p-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
134<span class="token plain-text">          </span><span class="token punctuation">{</span><span class="token comment">/* The actual dialog panel  */</span><span class="token punctuation">}</span><span class="token plain-text"></span>
135<span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogPanel</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>max-w-lg space-y-4 bg-white p-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
136<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogTitle</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font-bold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
137<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text">This will permanently deactivate your account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
138<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Are you sure you want to deactivate your account? All of your data will be permanently removed.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
139<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex gap-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
140<span class="token plain-text">              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">
140false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Cancel</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
141<span class="token plain-text">              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
142<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
143<span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
144<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
145<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
146<span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">></span></span>
147  <span class="token punctuation">)</span>
148<span class="token punctuation">}</span>
149</code></pre><p>This lets you <a href="#transitions">transition</a> the backdrop and panel independently with their own animations, and rendering
150it as a sibling ensures that it doesn&#x27;t interfere with your ability to scroll long dialogs.</p><h3 class="group whitespace-pre-wrap" id="scrollable-dialogs"><a href="#scrollable-dialogs" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Scrollable dialogs"></a><span aria-hidden="true">Scrollable dialogs</span></h3><p>Making a dialog scrollable is handled entirely in CSS, and the specific implementation depends on the design you are
151trying to achieve.</p><p>Here&#x27;s an example where the entire panel container is scrollable, and the panel itself moves as you scroll:</p><pre class="language-jsx"><code><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Description</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Dialog</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogPanel</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogTitle</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
152<span class="token keyword module">
152import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
153
154<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
155  <span class="token keyword">let</span> <span class="token punctuation">[</span>isOpen<span class="token punctuation">,</span> setIsOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
156
157  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
158    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
159<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Open dialog</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
160<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isOpen<span class="token punctuation">}</span></span> <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>relative z-50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
161<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
161fixed inset-0 w-screen overflow-y-auto p-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex min-h-full items-center justify-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogPanel</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>max-w-lg space-y-4 border bg-white p-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
162<span class="token plain-text">              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogTitle</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font-bold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
163<span class="token plain-text">              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text">This will permanently deactivate your account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
164<span class="token plain-text">              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Are you sure you want to deactivate your account? All of your data will be permanently removed.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
165<span class="token plain-text">              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex gap-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
166<span class="token plain-text">                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">
166false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Cancel</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
167<span class="token plain-text">                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
168<span class="token plain-text">              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
169<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
170<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
171<span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">></span></span>
172  <span class="token punctuation">)</span>
173<span class="token punctuation">}</span>
174</code></pre><p>When creating a scrollable dialog with a backdrop, make sure the backdrop is rendered <em>behind</em> the scrollable container,
175otherwise the scroll wheel won&#x27;t work when hovering over the backdrop, and the backdrop may obscure the scrollbar and
176prevent users from clicking it with their mouse.</p><h3 class="group whitespace-pre-wrap" id="managing-initial-focus"><a href="#managing-initial-focus" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Managing initial focus"></a><span aria-hidden="true">Managing initial focus</span></h3><p>By default, the <code>Dialog</code> component will focus the dialog element itself when opened, and pressing the <kbd>Tab</kbd> key
177will cycle through any focusable elements within the dialog.</p><p>Focus is trapped within the dialog as long as it is rendered, so tabbing to the end will start cycling back through the
178beginning again. All other application elements outside of the dialog will be marked as inert and thus not focusable.</p><p>If you&#x27;d like something other than the dialog&#x27;s root element to receive focus when your dialog is opened, you can add
179the <code>autoFocus</code> prop to any Headless UI form control:</p><pre class="language-jsx"><code><span class="token keyword module">
179import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Checkbox</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Dialog</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogPanel</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogTitle</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Field</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Label</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
180<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
181
182<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
183  <span class="token keyword">let</span> <span class="token punctuation">[</span>isOpen<span class="token punctuation">,</span> setIsOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
184  <span class="token keyword">let</span> <span class="token punctuation">[</span>isGift<span class="token punctuation">,</span> setIsGift<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
185
186  <span class="token keyword">function</span> <span class="token function">completeOrder</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
187    <span class="token comment">// ...</span>
188  <span class="token punctuation">}</span>
189
190  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
191    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isOpen<span class="token punctuation">}</span></span> <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
192<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
193<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text">Complete your order</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
194<span class="token plain-text"></span>
195<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Your order is all ready!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
196<span class="token plain-text"></span>
197<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Field</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
198<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Checkbox</span></span> <span class="token attr-name">autoFocus</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isGift<span class="token punctuation">}</span></span> <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>setIsGift<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span></div><span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Label</span></span><span class="token punctuation">></span></span><span class="token plain-text">This order is a gift</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Label</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
199<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Field</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
200<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">
200false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Cancel</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
201<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>completeOrder<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Complete order</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
202<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
203<span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span>
204  <span class="token punctuation">)</span>
205<span class="token punctuation">}</span>
206</code></pre><p>If the element you want to focus is not a Headless UI form control, you can add the <code>data-autofocus</code> attribute instead:</p><pre class="language-jsx"><code><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Dialog</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogPanel</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogTitle</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
207<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
208
209<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
210  <span class="token keyword">let</span> <span class="token punctuation">[</span>isOpen<span class="token punctuation">,</span> setIsOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
211
212  <span class="token keyword">function</span> <span class="token function">completeOrder</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
213    <span class="token comment">// ...</span>
214  <span class="token punctuation">}</span>
215
216  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
217    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isOpen<span class="token punctuation">}</span></span> <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">
217false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
218<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
219<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text">Complete your order</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
220<span class="token plain-text"></span>
221<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Your order is all ready!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
222<span class="token plain-text"></span>
223<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Cancel</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
224<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">data-autofocus</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>completeOrder<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><span class="token plain-text">          Complete order</span>
225<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
226<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
227<span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span>
228  <span class="token punctuation">)</span>
229<span class="token punctuation">}</span>
230</code></pre><h3 class="group whitespace-pre-wrap" id="rendering-to-a-portal"><a href="#rendering-to-a-portal" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Rendering to a portal"></a><span aria-hidden="true">Rendering to a portal</span></h3><p>Because of accessibility concerns, the <code>Dialog</code> component is automatically rendered in a
231<a href="https://reactjs.org/docs/portals.html">portal</a> under-the-hood.</p><p>
231Since dialogs and their backdrops take up the full page, you typically want to render them as a sibling to the root-most
232node of your React application. That way you can rely on natural DOM ordering to ensure that their content is rendered
233on top of your existing application UI.</p><p>It renders something like this:</p><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
234  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>your-app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
235    <span class="token comment">&lt;!-- ... --></span>
236  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
237  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>headlessui-portal-root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
238    <span class="token comment">&lt;!-- Rendered `Dialog` --></span>
239  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
240<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span></code></pre><p>This also makes it easy to apply scroll-locking to the rest of your application, as well as ensure that your dialog&#x27;s
241contents and backdrop are unobstructed to receive focus and click events.</p><h3 class="group whitespace-pre-wrap" id="adding-transitions"><a href="#adding-transitions" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Adding transitions"></a><span aria-hidden="true">Adding transitions</span></h3><p>To animate the opening and closing of the dialog, add the <code>transition</code> prop to the <code>Dialog</code> component and then use CSS
242to style the different stages of the transition:</p><pre class="language-jsx"><code><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Description</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Dialog</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogPanel</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogTitle</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
243<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
244
245<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
246  <span class="token keyword">let</span> <span class="token punctuation">[</span>isOpen<span class="token punctuation">,</span> setIsOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
247
248  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
249    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
250<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Open dialog</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
251<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span>
252        <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isOpen<span class="token punctuation">}</span></span>
253        <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
254<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div>        <span class="token attr-name">transition</span></div><div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div>        <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed inset-0 flex w-screen items-center justify-center bg-black/30 p-4 transition duration-300 ease-out data-closed:opacity-0<span class="token punctuation">"</span></span></div>      <span class="token punctuation">></span></span><span class="token plain-text"></span>
255<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogPanel</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>max-w-lg space-y-4 bg-white p-12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
256<span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogTitle</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font-bold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
257<span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text">This will permanently deactivate your account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
258<span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Are you sure you want to deactivate your account? All of your data will be permanently removed.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
259<span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex gap-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
260<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">
260false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Cancel</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
261<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
262<span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
263<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
264<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
265<span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">></span></span>
266  <span class="token punctuation">)</span>
267<span class="token punctuation">}</span>
268</code></pre><p>To animate your backdrop and panel separately, add the <code>transition</code> prop to the <code>DialogBackdrop</code> and <code>DialogPanel</code>
269components directly:</p><pre class="language-jsx"><code><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Description</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Dialog</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogBackdrop</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogPanel</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogTitle</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
270<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
271
272<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
273  <span class="token keyword">let</span> <span class="token punctuation">[</span>isOpen<span class="token punctuation">,</span> setIsOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">
273false</span><span class="token punctuation">)</span>
274
275  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
276    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
277<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Open dialog</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
278<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isOpen<span class="token punctuation">}</span></span> <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>relative z-50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
279<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogBackdrop</span></span> <span class="token attr-name">transition</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed inset-0 bg-black/30 duration-300 ease-out data-closed:opacity-0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text"></span>
280<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed inset-0 flex w-screen items-center justify-center p-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogPanel</span></span></div>
280            <span class="token attr-name">transition</span>
281            <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>max-w-lg space-y-4 bg-white p-12 duration-300 ease-out data-closed:scale-95 data-closed:opacity-0<span class="token punctuation">"</span></span>
282          <span class="token punctuation">></span></span><span class="token plain-text"></span>
283<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogTitle</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-lg font-bold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text">This will permanently deactivate your account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Are you sure you want to deactivate your account? All of your data will be permanently removed.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
284<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex gap-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
285<span class="token plain-text">              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Cancel</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
286<span class="token plain-text">              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">
286false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
287<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
288<span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
289<span class="token plain-text">        </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
290<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
291<span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">></span></span>
292  <span class="token punctuation">)</span>
293<span class="token punctuation">}</span>
294</code></pre><p>Internally, the <code>transition</code> prop is implemented in the exact same way as the <code>Transition</code> component. See the
295<a href="/react/transition">Transition documentation</a> to learn more.</p><h3 class="group whitespace-pre-wrap" id="animating-with-framer-motion"><a href="#animating-with-framer-motion" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Animating with Framer Motion"></a><span aria-hidden="true">Animating with Framer Motion</span></h3><p>Headless UI also composes well with other animation libraries in the React ecosystem like
296<a href="https://www.framer.com/motion/">Framer Motion</a> and <a href="https://www.react-spring.io/">React Spring</a>. You just need to
297expose some state to those libraries.</p><p>For example, to animate the dialog with Framer Motion, add the <code>static</code> prop to the <code>Dialog</code> component and then
298conditionally render it based on the <code>open</code> state:</p><pre class="language-jsx"><code><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Description</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Dialog</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogPanel</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DialogTitle</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'@headlessui/react'</span>
299<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">AnimatePresence</span><span class="token punctuation">,</span> motion <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'framer-motion'</span>
300<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span>
301
302<span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Example</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
303  <span class="token keyword">let</span> <span class="token punctuation">[</span>isOpen<span class="token punctuation">,</span> setIsOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">
303false</span><span class="token punctuation">)</span>
304
305  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
306    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
307<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Open dialog</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
308<span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">AnimatePresence</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
309<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">        </span><span class="token punctuation">{</span>isOpen <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span></div><div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div>          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Dialog</span></span> <span class="token attr-name">static</span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isOpen<span class="token punctuation">}</span></span> <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>relative z-50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span></div><span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>motion.div</span>
310              <span class="token attr-name">initial</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
311              <span class="token attr-name">animate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
312              <span class="token attr-name">exit</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
313              <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed inset-0 bg-black/30<span class="token punctuation">"</span></span>
314            <span class="token punctuation">/></span></span><span class="token plain-text"></span>
315<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed inset-0 flex w-screen items-center justify-center p-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
316<span class="token plain-text">              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogPanel</span></span>
317                <span class="token attr-name">as</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>motion<span class="token punctuation">.</span><span class="token property-access">div</span><span class="token punctuation">}</span></span>
318                <span class="token attr-name">initial</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">scale</span><span class="token operator">:</span> <span class="token number">0.95</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
319                <span class="token attr-name">animate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">scale</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
320                <span class="token attr-name">exit</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">opacity</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token literal-property property">scale</span><span class="token operator">:</span> <span class="token number">0.95</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
321                <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>max-w-lg space-y-4 bg-white p-12<span class="token punctuation">"</span></span>
322              <span class="token punctuation">></span></span><span class="token plain-text"></span>
323<span class="token plain-text">                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DialogTitle</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text-lg font-bold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogTitle</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
324<span class="token plain-text">                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text">This will permanently deactivate your account</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Description</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
325<span class="token plain-text">                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span><span class="token plain-text">Are you sure you want to deactivate your account? All of your data will be permanently removed.</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
326<span class="token plain-text">                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>flex gap-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
327<span class="token plain-text">                  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">
327false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Cancel</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
328<span class="token plain-text">                  </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setIsOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Deactivate</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
329<span class="token plain-text">                </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
330<span class="token plain-text">              </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">DialogPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
331<span class="token plain-text">            </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token plain-text"></span>
332<div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div><span class="token plain-text">          </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Dialog</span></span><span class="token punctuation">></span></span></div><div class="relative -mx-4 block bg-white/5 px-4"><div class="absolute left-0 h-full w-[2px] bg-white/25"></div>        <span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token plain-text"></span></div><span class="token plain-text">      </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">AnimatePresence</span></span><span class="token punctuation">></span></span><span class="token plain-text"></span>
333<span class="token plain-text">    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">></span></span>
334  <span class="token punctuation">)</span>
335<span class="token punctuation">}</span>
336</code></pre><p>The <code>open</code> prop is still used to manage scroll-locking and focus trapping, but as long as <code>static</code> is present, the
337actual element will always be rendered regardless of the <code>open</code> value, which allows you to control it yourself
338externally.</p><h2 class="group whitespace-pre-wrap" id="keyboard-interaction"><a href="#keyboard-interaction" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Keyboard interaction"></a><span aria-hidden="true">Keyboard interaction</span></h2></div>
339<div class="mt-6 mb-12"><div class="overflow-x-auto"><div class="min-w-full"><div class="overflow-hidden"><table class="min-w-full border-b border-white/7.5 text-left"><tbody class="divide-y divide-white/7.5"><tr class="text-white"><td class="w-1/2 py-2 pr-4 text-sm font-medium whitespace-nowrap">Command</td><td class="w-1/2 py-2 pl-4 text-sm font-medium whitespace-nowrap">Description</td></tr><tr><td class="prose prose-sm prose-docs-table py-2 pr-8 align-top sm:whitespace-nowrap"><p class="inline-flex flex-wrap items-center gap-x-[0.5ch] gap-y-1"><kbd class="inline-flex rounded-md bg-white/15 px-2 py-0.5 text-xs text-white last-of-type:mr-[0.5ch]">Esc</kbd></p></td><td class="py-2 pl-4 align-top"><div class="prose prose-sm prose-docs-table"><p>Closes any open Dialogs</p></div></td></tr><tr><td class="prose prose-sm prose-docs-table py-2 pr-8 align-top sm:whitespace-nowrap"><p class="inline-flex flex-wrap items-center gap-x-[0.5ch] gap-y-1"><kbd class="inline-flex rounded-md bg-white/15 px-2 py-0.5 text-xs text-white last-of-type:mr-[0.5ch]">Tab</kbd></p></td><td class="py-2 pl-4 align-top"><div class="prose prose-sm prose-docs-table"><p>Cycles through an open Dialog&#x27;s contents</p></div></td></tr><tr><td class="prose prose-sm prose-docs-table py-2 pr-8 align-top sm:whitespace-nowrap"><p class="inline-flex flex-wrap items-center gap-x-[0.5ch] gap-y-1"><kbd class="inline-flex rounded-md bg-white/15 px-2 py-0.5 text-xs text-white last-of-type:mr-[0.5ch]">Shift</kbd><span> + </span><kbd class="inline-flex rounded-md bg-white/15 px-2 py-0.5 text-xs text-white last-of-type:mr-[0.5ch]">Tab</kbd></p></td><td class="py-2 pl-4 align-top"><div class="prose prose-sm prose-docs-table"><p>Cycles backwards through an open Dialog&#x27;s contents</p></div></td></tr></tbody></table></div></div></div></div>
340<div class="prose"><h2 class="group whitespace-pre-wrap" id="component-api"><a href="#component-api" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Component API"></a><span aria-hidden="true">Component API</span></h2><h3 class="group whitespace-pre-wrap" id="dialog"><a href="#dialog" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Dialog"></a><span aria-hidden="true">Dialog</span></h3><p>The main dialog component.</p></div>
341<div class="mt-6 mb-12"><div class="-mx-2 overflow-x-auto sm:mx-0"><table class="w-full min-w-[540px] border-b border-white/7.5 text-left"><tbody class="divide-y divide-white/7.5"><tr class="text-white"><td class="w-1/5 py-2 pl-4 text-sm font-medium sm:pl-0">Prop</td><td class="w-1/5 py-2 pl-2 text-sm font-medium">Default</td><td class="w-3/5 py-2 pl-2 text-sm font-medium">Description</td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>open</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span class="text-gray-400">—</span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>Boolean</code></div><div class="prose prose-sm prose-docs-table"><p>Whether the <code>Dialog</code> is open or not.</p></div></td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>onClose</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span class="text-gray-400">—</span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>(false) =&gt; void</code></div><div class="prose prose-sm prose-docs-table"><p>Called when the <code>Dialog</code> is dismissed (via outside click of the <code>DialogPanel</code> or by pressing the <code>Esc</code> key).
342Typically used to close the dialog by setting <code>open</code>
342 to false.</p></div></td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>as</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>div</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>String | Component</code></div><div class="prose prose-sm prose-docs-table"><p>The element or component the <!-- -->dialog<!-- --> should render as.</p></div></td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>autoFocus</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>false</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>Boolean</code></div><div class="prose prose-sm prose-docs-table"><p>Whether or not the <!-- -->dialog<!-- --> should receive focus when first rendered.</p></div></td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>transition</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>false</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>Boolean</code></div><div class="prose prose-sm prose-docs-table"><p>Whether the element should render transition attributes like <code>data-closed</code>,<!-- --> <code>data-enter</code> and <code>data-leave</code>.</p></div></td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>static</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>false</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>Boolean</code></div><div class="prose prose-sm prose-docs-table"><p>Whether the element should ignore the internally managed open/closed state.</p></div></td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>unmount</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>true</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>Boolean</code></div><div class="prose prose-sm prose-docs-table"><p>Whether the element should be unmounted or hidden based on the open/closed state.</p></div></td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>role</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>dialog</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>&#x27;dialog&#x27; | &#x27;alertdialog&#x27;</code></div><div class="prose prose-sm prose-docs-table"><p>The <code>role</code> to apply to the dialog root element.</p></div></td></tr></tbody></table></div></div>
343<div class="mt-6 mb-12"><div class="-mx-2 overflow-x-auto sm:mx-0"><table class="w-full min-w-[540px] border-b border-white/7.5 text-left"><tbody class="divide-y divide-white/7.5"><tr class="text-white"><td class="w-1/5 pb-2 pl-4 text-sm font-medium sm:pl-0">Data Attribute</td><td class="w-1/5 pb-2 pl-4 text-sm font-medium sm:pl-0">Render Prop</td><td class="w-3/5 pb-2 pl-2 text-sm font-medium">Description</td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline text-sm sm:pl-0"><code>data-<!-- -->open</code></td><td class="prose prose-sm py-3 pl-2 align-baseline text-sm sm:pl-0"><code>open</code></td><td class="py-3 pl-2 align-baseline"><p class="prose prose-sm my-0 space-x-5"><span><code>Boolean</code></span></p><div class="prose prose-sm prose-docs-table"><p>Whether or not the <!-- -->dialog<!-- --> is open.</p></div></td></tr></tbody></table></div></div>
344<div class="prose"><h3 class="group whitespace-pre-wrap" id="dialog-backdrop"><a href="#dialog-backdrop" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="DialogBackdrop"></a><span aria-hidden="true">DialogBackdrop</span></h3><p>The visual backdrop behind your dialog panel.</p></div>
345<div class="mt-6 mb-12"><div class="-mx-2 overflow-x-auto sm:mx-0"><table class="w-full min-w-[540px] border-b border-white/7.5 text-left"><tbody class="divide-y divide-white/7.5"><tr class="text-white"><td class="w-1/5 py-2 pl-4 text-sm font-medium sm:pl-0">Prop</td><td class="w-1/5 py-2 pl-2 text-sm font-medium">Default</td><td class="w-3/5 py-2 pl-2 text-sm font-medium">Description</td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>as</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>div</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>String | Component</code></div><div class="prose prose-sm prose-docs-table"><p>The element or component the <!-- -->dialog backdrop<!-- --> should render as.</p></div></td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>transition</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>false</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>Boolean</code></div><div class="prose prose-sm prose-docs-table"><p>Whether the element should render transition attributes like <code>data-closed</code>,<!-- --> <code>data-enter</code> and <code>data-leave</code>.</p></div></td></tr></tbody></table></div></div>
346<div class="mt-6 mb-12"><div class="-mx-2 overflow-x-auto sm:mx-0"><table class="w-full min-w-[540px] border-b border-white/7.5 text-left"><tbody class="divide-y divide-white/7.5"><tr class="text-white"><td class="w-1/5 pb-2 pl-4 text-sm font-medium sm:pl-0">Data Attribute</td><td class="w-1/5 pb-2 pl-4 text-sm font-medium sm:pl-0">Render Prop</td><td class="w-3/5 pb-2 pl-2 text-sm font-medium">Description</td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline text-sm sm:pl-0"><code>data-<!-- -->open</code></td><td class="prose prose-sm py-3 pl-2 align-baseline text-sm sm:pl-0"><code>open</code></td><td class="py-3 pl-2 align-baseline"><p class="prose prose-sm my-0 space-x-5"><span><code>Boolean</code></span></p><div class="prose prose-sm prose-docs-table"><p>Whether or not the <!-- -->dialog<!-- --> is open.</p></div></td></tr></tbody></table></div></div>
347<div class="prose"><h3 class="group whitespace-pre-wrap" id="dialog-panel"><a href="#dialog-panel" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="DialogPanel"></a><span aria-hidden="true">DialogPanel</span></h3><p>The main content area of your dialog. Clicking outside of this component will trigger the <code>onClose</code> of the <code>Dialog</code>
348component.</p></div>
349<div class="mt-6 mb-12"><div class="-mx-2 overflow-x-auto sm:mx-0"><table class="w-full min-w-[540px] border-b border-white/7.5 text-left"><tbody class="divide-y divide-white/7.5"><tr class="text-white"><td class="w-1/5 py-2 pl-4 text-sm font-medium sm:pl-0">Prop</td><td class="w-1/5 py-2 pl-2 text-sm font-medium">Default</td><td class="w-3/5 py-2 pl-2 text-sm font-medium">Description</td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>as</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>div</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>String | Component</code></div><div class="prose prose-sm prose-docs-table"><p>The element or component the <!-- -->dialog panel<!-- --> should render as.</p></div></td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>transition</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>false</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>Boolean</code></div><div class="prose prose-sm prose-docs-table"><p>Whether the element should render transition attributes like <code>data-closed</code>,<!-- --> <code>data-enter</code> and <code>data-leave</code>.</p></div></td></tr></tbody></table></div></div>
350<div class="mt-6 mb-12"><div class="-mx-2 overflow-x-auto sm:mx-0"><table class="w-full min-w-[540px] border-b border-white/7.5 text-left"><tbody class="divide-y divide-white/7.5"><tr class="text-white"><td class="w-1/5 pb-2 pl-4 text-sm font-medium sm:pl-0">Data Attribute</td><td class="w-1/5 pb-2 pl-4 text-sm font-medium sm:pl-0">Render Prop</td><td class="w-3/5 pb-2 pl-2 text-sm font-medium">Description</td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline text-sm sm:pl-0"><code>data-<!-- -->open</code></td><td class="prose prose-sm py-3 pl-2 align-baseline text-sm sm:pl-0"><code>open</code></td><td class="py-3 pl-2 align-baseline"><p class="prose prose-sm my-0 space-x-5"><span><code>Boolean</code></span></p><div class="prose prose-sm prose-docs-table"><p>Whether or not the <!-- -->dialog<!-- --> is open.</p></div></td></tr></tbody></table></div></div>
351<div class="prose"><h3 class="group whitespace-pre-wrap" id="dialog-title"><a href="#dialog-title" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="DialogTitle"></a><span aria-hidden="true">DialogTitle</span></h3><p>This is the title for your dialog. When this is used, it will set the <code>aria-labelledby</code> on the dialog.</p></div>
352<div class="mt-6 mb-12"><div class="-mx-2 overflow-x-auto sm:mx-0"><table class="w-full min-w-[540px] border-b border-white/7.5 text-left"><tbody class="divide-y divide-white/7.5"><tr class="text-white"><td class="w-1/5 py-2 pl-4 text-sm font-medium sm:pl-0">Prop</td><td class="w-1/5 py-2 pl-2 text-sm font-medium">Default</td><td class="w-3/5 py-2 pl-2 text-sm font-medium">Description</td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>as</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>h2</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>String | Component</code></div><div class="prose prose-sm prose-docs-table"><p>The element or component the <!-- -->dialog title<!-- --> should render as.</p></div></td></tr></tbody></table></div></div>
353<div class="mt-6 mb-12"><div class="-mx-2 overflow-x-auto sm:mx-0"><table class="w-full min-w-[540px] border-b border-white/7.5 text-left"><tbody class="divide-y divide-white/7.5"><tr class="text-white"><td class="w-1/5 pb-2 pl-4 text-sm font-medium sm:pl-0">Data Attribute</td><td class="w-1/5 pb-2 pl-4 text-sm font-medium sm:pl-0">Render Prop</td><td class="w-3/5 pb-2 pl-2 text-sm font-medium">Description</td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline text-sm sm:pl-0"><code>data-<!-- -->open</code></td><td class="prose prose-sm py-3 pl-2 align-baseline text-sm sm:pl-0"><code>open</code></td><td class="py-3 pl-2 align-baseline"><p class="prose prose-sm my-0 space-x-5"><span><code>Boolean</code></span></p><div class="prose prose-sm prose-docs-table"><p>Whether or not the <!-- -->dialog<!-- --> is open.</p></div></td></tr></tbody></table></div></div>
354<div class="prose"><h3 class="group whitespace-pre-wrap" id="close-button"><a href="#close-button" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="CloseButton"></a><span aria-hidden="true">CloseButton</span></h3><p>This button will close the nearest <code>Dialog</code> ancestor when clicked. Alternatively, use the <code>useClose</code> hook to
355imperatively close the dialog.</p></div>
356<div class="mt-6 mb-12"><div class="-mx-2 overflow-x-auto sm:mx-0"><table class="w-full min-w-[540px] border-b border-white/7.5 text-left"><tbody class="divide-y divide-white/7.5"><tr class="text-white"><td class="w-1/5 py-2 pl-4 text-sm font-medium sm:pl-0">Prop</td><td class="w-1/5 py-2 pl-2 text-sm font-medium">Default</td><td class="w-3/5 py-2 pl-2 text-sm font-medium">Description</td></tr><tr><td class="prose prose-sm py-3 pl-4 align-baseline sm:pl-0"><code>as</code></td><td class="prose prose-sm py-3 pl-2 align-baseline"><span><code>button</code></span></td><td class="py-3 pl-2 align-baseline"><div class="prose prose-sm my-0 space-x-5"><code>String | Component</code></div><div class="prose prose-sm prose-docs-table"><p>The element or component the <!-- -->close button<!-- --> should render as.</p></div></td></tr></tbody></table></div></div>
357<div class="prose mt-24"><h2 class="group whitespace-pre-wrap" id="styled-examples"><a href="#styled-examples" class="absolute -ml-6 text-[#a1a1aa]! no-underline! opacity-0 shadow-none! group-hover:opacity-100 after:content-[&#x27;#&#x27;] focus-visible:opacity-100" aria-label="Styled examples"></a><span aria-hidden="true">Styled examples</span></h2><p>If you&#x27;re interested in predesigned <a href="https://tailwindui.com/components/
357application-ui/overlays/dialogs">Tailwind CSS <!-- -->modal and dialog component<!-- --> examples</a> using Headless UI<!-- -->, check out <strong>Tailwind Plus</strong> — a collection of beautifully designed and expertly crafted components built by us.</p><p>It&#x27;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.</p></div><div class="my-16"><svg class="w-48 max-w-full" fill="none" viewBox="0 0 204 24"><path class="fill-sky-400" fill-rule="evenodd" d="M19.561.526q-7.824 0-9.78 7.825 2.934-3.912 6.846-2.934c1.488.372 2.552 1.451 3.73 2.646 1.917 1.947 4.137 4.2 8.985 4.2q7.825 0 9.78-7.824-2.934 3.912-6.846 2.934C30.788 7 29.724 5.92 28.547 4.726 26.63 2.78 24.41.526 19.561.526m-9.78 11.737q-7.825 0-9.781 7.825 2.934-3.913 6.846-2.934c1.489.372 2.552 1.451 3.73 2.646 1.917 1.947 4.137 4.2 8.985 4.2q7.825 0 9.781-7.825-2.934 3.913-6.846 2.935c-1.489-.372-2.552-1.452-3.73-2.647-1.917-1.947-4.137-4.2-8.985-4.2" clip-rule="evenodd"></path><path fill="#fff" d="M144.741.81h2.919v18.922h-2.919v-1.946c-1.027 1.432-2.622 2.297-4.731 2.297-3.676 0-6.73-3.108-6.73-7.108 0-4.028 3.054-7.11 6.73-7.11 2.109 0 3.704.866 4.731 2.271zM140.47 17.3c2.433 0 4.271-1.812 4.271-4.325s-1.838-4.325-4.271-4.325-4.271 1.81-4.271 4.325c0 2.513 1.838 4.324 4.271 4.324M125.704 5.866c3.027 0 5.189 2.054 5.189 5.568v8.298h-2.919v-8c0-2.055-1.189-3.136-3.027-3.136-1.919 0-3.433 1.135-3.433 3.892v7.244h-2.919V6.217h2.919v1.73c.892-1.406 2.352-2.081 4.19-2.081M113.746 4.19c-1.028 0-1.866-.865-1.866-1.865A1.87 1.87 0 0 1 113.746.46c1.027 0 1.865.837 1.865 1.865 0 1-.838 1.865-1.865 1.865m-1.46 15.542V6.217h2.919v13.515zM107.055 6.217h3.081l-4.244 13.515h-2.865l-2.811-9.11-2.838 9.11h-2.865L90.269 6.217h3.081l2.622 9.325 2.839-9.325h2.784l2.811 9.325zM85.177 19.732V0h2.919v19.732zM80.327 4.19c-1.027 0-1.865-.865-1.865-1.865 0-1.028.838-1.865 1.865-1.865s1.865.837 1.865 1.865c0 1-.837 1.865-1.865 1.865m-1.46 15.542V6.217h2.92v13.515zM72.546 6.217h2.92v13.515h-2.92v-1.946c-1.027 1.432-2.622 2.297-4.73 2.297-3.677 0-6.731-3.108-6.731-7.108 0-4.028 3.054-7.11 6.73-7.11 2.109 0 3.704.866 4.73 2.271zm-4.271 11.082c2.433 0 4.27-1.81 4.27-4.324s-1.837-4.325-4.27-4.325-4.27 1.81-4.27 4.325c0 2.513 1.837 4.324 4.27 4.324M59.749 9.028h-3.352v6.487c0 1.73 1.135 1.703 3.352 1.595v2.622c-4.488.54-6.272-.703-6.272-4.217V9.028h-2.486V6.217h2.486v-2.92l2.92-.864v3.784h3.352z"></path><path class="fill-sky-400" d="M198.426 20.01c-2.848 0-4.72-1.373-5.477-3.445l2.35-1.374c.498 1.294 1.474 2.131 3.207 2.131 1.653 0 2.231-.697 2.231-1.474 0-1.036-.936-1.434-3.008-2.031-2.131-.618-4.202-1.514-4.202-4.163 0-2.63 2.191-4.143 4.581-4.143 2.29 0 4.043 1.175 4.979 3.127l-2.311 1.335c-.497-1.056-1.254-1.793-2.668-1.793-1.156 0-1.833.598-1.833 1.394 0 .857.538 1.315 2.649 1.952 2.211.697 4.561 1.434 4.561 4.282 0 2.61-2.091 4.203-5.059 4.203M183.861 20.01c-3.048 0-5.318-1.832-5.318-4.839v-9.38h2.728v9.16c0 1.355.717 2.371 2.59 2.371s2.589-1.016 2.589-2.37V5.79h2.748v9.381c0 3.007-2.27 4.84-5.337 4.84M170.005 17.103h5.318v2.629h-8.066V5.79h2.748zM158.715 5.79c2.689 0 4.761 2.071 4.761 4.68 0 2.61-2.072 4.681-4.761 4.681h-2.449v4.58h-2.749V5.792zm0 6.792c1.176 0 2.032-.916 2.032-2.111 0-1.215-.856-2.112-2.032-2.112h-2.449v4.223z"></path></svg><p class="mt-3 text-sm"><a class="text-white hover:underline" href="https://tailwindcss.com/plus">Explore <span class="hidden min-[450px]:inline">more predesigned</span> examples →</a></p><a href="https://tailwindcss.com/plus" class="z-10 -mx-2 mt-6 block border border-x-[color-mix(in_srgb,white_10%,black)] border-y-white/5 bg-white/5 p-2 md:-mx-[calc(--spacing(4)+2px)]"><img alt="Various components from Tailwind UI" loading="lazy" width="1284" height="716" decoding="async" data-nimg="1" class="pointer-events-none rounded-2xl inset-ring inset-ring-gray-950/5" style="color:transparent" srcSet="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftailwind-plus.434a3ca6.png&amp;w=1920&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftailwind-plus.434a3ca6.png&amp;w=3840&amp;q=75 2x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftailwind-plus.434a3ca6.png&amp;w=3840&amp;q=75"/></a></div></div></main><div class="sticky top-0 hidden h-screen w-68 xl:block"><div class="h-full overflow-y-auto px-4 pt-16 pb-[calc(80px+4rem)]"><div><p class="font-mono text-xs font-semibold tracking-widest text-white/50 uppercase">On this page</p><nav><ul class="text-sm text-white/80"><li class="mt-4"><a href="#installation" class="hover:text-white">Installation</a><div class="pl-4"><ul class="text-sm text-white/80"></ul></div></li><li class="mt-4"><a href="#basic-example" class="hover:text-white">Basic example</a><div class="pl-4"><ul class="text-sm text-white/80"></ul></div></li><li class="mt-4"><a href="#styling" class="hover:text-white">Styling</a><div class="pl-4"><ul class="text-sm text-white/80"></ul></div></li><li class="mt-4"><a href="#examples" class="hover:text-white">Examples</a><div class="pl-4"><ul class="text-sm text-white/80"><li class="mt-4"><a href="#showing-hiding-the-dialog" class="hover:text-white">Showing/hiding the dialog</a><div class="pl-4"></div></li><li class="mt-4"><a href="#adding-a-backdrop" class="hover:text-white">Adding a backdrop</a><div class="pl-4"></div></li><li class="mt-4"><a href="#scrollable-dialogs" class="hover:text-white">Scrollable dialogs</a><div class="pl-4"></div></li><li class="mt-4"><a href="#managing-initial-focus" class="hover:text-white">Managing initial focus</a><div class="pl-4"></div></li><li class="mt-4"><a href="#rendering-to-a-portal" class="hover:text-white">Rendering to a portal</a><div class="pl-4"></div></li><li class="mt-4"><a href="#adding-transitions" class="hover:text-white">Adding transitions</a><div class="pl-4"></div></li><li class="mt-4"><a href="#animating-with-framer-motion" class="hover:text-white">Animating with Framer Motion</a><div class="pl-4"></div></li></ul></div></li><li class="mt-4"><a href="#keyboard-interaction" class="hover:text-white">Keyboard interaction</a><div class="pl-4"><ul class="text-sm text-white/80"></ul></div></li><li class="mt-4"><a href="#component-api" class="hover:text-white">Component API</a><div class="pl-4"><ul class="text-sm text-white/80"><li class="mt-4"><a href="#dialog" class="hover:text-white">Dialog</a><div class="pl-4"></div></li><li class="mt-4"><a href="#dialog-backdrop" class="hover:text-white">DialogBackdrop</a><div class="pl-4"></div></li><li class="mt-4"><a href="#dialog-panel" class="hover:text-white">DialogPanel</a><div class="pl-4"></div></li><li class="mt-4"><a href="#dialog-title" class="hover:text-white">DialogTitle</a><div class="pl-4"></div></li><li class="mt-4"><a href="#close-button" class="hover:text-white">CloseButton</a><div class="pl-4"></div></li></ul></div></li><li class="mt-4"><a href="#styled-examples" class="hover:text-white">Styled examples</a><div class="pl-4"><ul class="text-sm text-white/80"></ul></div></li></ul></nav></div></div></div></div></main><footer class="py-12 text-center text-sm/6 text-white">© <!-- -->2026<!-- --> Tailwind Labs Inc. All rights reserved.</footer></div></div></div>
357<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"title":"Dialog"},"__N_SSG":true},"page":"/react/dialog","query":{},"buildId":"RjS1956bWjcD5dMgv9O1y","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
357<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"414d832f5bdf41d489a5070986cf6573","r":1,"spa":2}' crossorigin="anonymous"></script>
357
358</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.