Headless UI v1.0

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 account</Dialog.Title>
      <Dialog.Description>This will permanently deactivate your account</Dialog.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)}>Deactivate</button>
      <button onClick={() => setIsOpen(false)}>Cancel</button>
    </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>Plan</RadioGroup.Label>
      <RadioGroup.Option value="startup">
        {({ checked }) => <span className={checked ? "bg-blue-200" : ""}>Startup</span>}
      </RadioGroup.Option>
      <RadioGroup.Option value="business">
        {({ checked }) => <span className={checked ? "bg-blue-200" : ""}>Business</span>}
      </RadioGroup.Option>
      <RadioGroup.Option value="enterprise">
        {({ checked }) => <span className={checked ? "bg-blue-200" : ""}>Enterprise</span>}
      </RadioGroup.Option>
    </RadioGroup>
  );
}

<template>
  <Popover class="relative">
    <PopoverButton>Solutions</PopoverButton>
    <PopoverPanel class="absolute z-10">
      <div>
        <a href="/analytics">Analytics</a>
        <a href="/engagement">Engagement</a>
        <a href="/security">Security</a>
        <a href="/integrations">Integrations</a>
      </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>
  <!-- This `show` prop controls all nested `Transition.Child` components. -->
  <TransitionRoot :show="isOpen">
    <!-- Background overlay -->
    <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>
    <!-- Sliding sidebar -->
    <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>