Headless UI v1.0 – Tailwind CSS

import { useState } from "react";import { Dialog } from "@headlessui/react";function MyDialog() {  let [isOpen, setIsOpen] = useState(true);  return (    Dialog open={isOpen} onClose={setIsOpen}>      Dialog.Overlay />      Dialog.Title>Deactivate accountDialog.Title>      Dialog.Description>This will permanently deactivate your accountDialog.Description>      p>        Are you sure you want to deactivate your account? All of your data will be permanently removed. This action        cannot be undone.      p>      button onClick={() => setIsOpen(false)}>Deactivatebutton>      button onClick={() => setIsOpen(false)}>Cancelbutton>    Dialog>  );}

template>  Disclosure>    DisclosureButton> Is team pricing available? DisclosureButton>    DisclosurePanel> Yes! You can purchase a license that you can share with your entire team. DisclosurePanel>  Disclosure>template>script>  import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";  export default {    components: { Disclosure, DisclosureButton, DisclosurePanel },  };script>

import { useState } from "react";import { RadioGroup } from "@headlessui/react";function MyRadioGroup() {  let [plan, setPlan] = useState("startup");  return (    RadioGroup value={plan} onChange={setPlan}>      RadioGroup.Label>PlanRadioGroup.Label>      RadioGroup.Option value="startup">        {({ checked }) => span className={checked ? "bg-blue-200" : ""}>Startupspan>}      RadioGroup.Option>      RadioGroup.Option value="business">        {({ checked }) => span className={checked ? "bg-blue-200" : ""}>Businessspan>}      RadioGroup.Option>      RadioGroup.Option value="enterprise">        {({ checked }) => span className={checked ? "bg-blue-200" : ""}>Enterprisespan>}      RadioGroup.Option>    RadioGroup>  );}

template>  Popover class="relative">    PopoverButton>SolutionsPopoverButton>    PopoverPanel class="absolute z-10">      div>        a href="/analytics">Analyticsa>        a href="/engagement">Engagementa>        a href="/security">Securitya>        a href="/integrations">Integrationsa>      div>      img src="/solutions.jpg" alt="" />    PopoverPanel>  Popover>template>script>  import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";  export default {    components: { Popover, PopoverButton, PopoverPanel },  };script>

template>    TransitionRoot :show="isOpen">        TransitionChild      enter="transition-opacity"      ease-linear      duration-300"      enter-from="opacity-0"      enter-to="opacity-100"      leave="transition-opacity"      ease-linear      duration-300"      leave-from="opacity-100"      leave-to="opacity-0"    >          TransitionChild>        TransitionChild      enter="transition"      ease-in-out      duration-300      transform"      enter-from="-translate-x-full"      enter-to="translate-x-0"      leave="transition"      ease-in-out      duration-300      transform"      leave-from="translate-x-0"      leave-to="-translate-x-full"    >          TransitionChild>  TransitionRoot>template>script>import { ref } from "vue";import { Transition, TransitionChild } from "@headlessui/vue";export default {  components: { TransitionRoot: Transition, TransitionChild },  setup() {    const isShowing = ref(true);    return {      isShowing,    };  },};script>