diff --git a/CHANGELOG.md b/CHANGELOG.md
index 701bd70..0bffc1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,7 +12,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed `outside click` not re-focusing the `Menu.Button` ([#220](https://github.com/tailwindlabs/headlessui/pull/220), [#256](https://github.com/tailwindlabs/headlessui/pull/256))
 - Fixed `outside click` not re-focusing the `Listbox.Button` ([#220](https://github.com/tailwindlabs/headlessui/pull/220), [#256](https://github.com/tailwindlabs/headlessui/pull/256))
 - Fixed `outside click` not re-focusing the `Popover` ([#261](https://github.com/tailwindlabs/headlessui/pull/220), [#256](https://github.com/tailwindlabs/headlessui/pull/261))
-- Fix incorrect type error `unique symbol` ([#248](https://github.com/tailwindlabs/headlessui/pull/248), [#240](https://github.com/tailwindlabs/headlessui/issues/240))
 - Force focus in `Menu.Items` and `Listbox.Options` from within the component itself ([#261](https://github.com/tailwindlabs/headlessui/pull/261))
 - Fix `undefined` values in id's for the `Dialog` component ([#261](https://github.com/tailwindlabs/headlessui/pull/261))
 - Ensure `useInertOthers` works when used in a shared parent ([#261](https://github.com/tailwindlabs/headlessui/pull/261))
@@ -34,7 +33,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixes
 
 - Fix incorrect `DOM` node from ref ([#249](https://github.com/tailwindlabs/headlessui/pull/249))
-- Fix broken behaviour since Vue 3.0.5 ([#279](https://github.com/tailwindlabs/headlessui/pull/279))
 - Stop propagating keyboard/mouse events ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
 
 ### Added
@@ -46,6 +44,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `FocusTrap` component ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
 - Add `Popover`, `PopoverButton`, `PopoverOverlay`, `PopoverPanel` and `PopoverGroup` components ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
 - Add `RadioGroup`, `RadioGroupOption`, `RadioGroupLabel` and `RadioGroupDescription` components ([#282](https://github.com/tailwindlabs/headlessui/pull/282))
+- Add `TransitionRoot` and `TransitionChild` components ([#326](https://github.com/tailwindlabs/headlessui/pull/326))
 
 ## [@headlessui/react@v0.3.2] - 2021-04-02
 
diff --git a/packages/@headlessui-react/src/components/transitions/transition.test.tsx b/packages/@headlessui-react/src/components/transitions/transition.test.tsx
index 5e860c6..0439dae 100644
--- a/packages/@headlessui-react/src/components/transitions/transition.test.tsx
+++ b/packages/@headlessui-react/src/components/transitions/transition.test.tsx
@@ -167,7 +167,7 @@ describe('Setup API', () => {
             </div>
           )
         }).toThrowErrorMatchingInlineSnapshot(
-          `"A <Transition.Child /> is used but it is missing a parent <Transition />."`
+          `"A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />."`
         )
       })
     )
@@ -181,6 +181,15 @@ describe('Setup API', () => {
       expect(document.getElementsByClassName('transition')).not.toBeNull()
     })
 
+    it('should be possible to use a Transition.Root and a Transition.Child', () => {
+      render(
+        <Transition.Root show={true}>
+          <Transition.Child className="transition" />
+        </Transition.Root>
+      )
+      expect(document.getElementsByClassName('transition')).not.toBeNull()
+    })
+
     it('should be possible to nest transition components', () => {
       let { container } = render(
         <div className="My Page">
diff --git a/packages/@headlessui-react/src/components/transitions/transition.tsx b/packages/@headlessui-react/src/components/transitions/transition.tsx
index fa76f7f..9ac5397 100644
--- a/packages/@headlessui-react/src/components/transitions/transition.tsx
+++ b/packages/@headlessui-react/src/components/transitions/transition.tsx
@@ -68,7 +68,9 @@ function useTransitionContext() {
   let context = useContext(TransitionContext)
 
   if (context === null) {
-    throw new Error('A <Transition.Child /> is used but it is missing a parent <Transition />.')
+    throw new Error(
+      'A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.'
+    )
   }
 
   return context
@@ -78,7 +80,9 @@ function useParentNesting() {
   let context = useContext(NestingContext)
 
   if (context === null) {
-    throw new Error('A <Transition.Child /> is used but it is missing a parent <Transition />.')
+    throw new Error(
+      'A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.'
+    )
   }
 
   return context
@@ -377,3 +381,4 @@ export function Transition<TTag extends ElementType = typeof DEFAULT_TRANSITION_
 }
 
 Transition.Child = TransitionChild
+Transition.Root = Transition
diff --git a/packages/@headlessui-vue/examples/src/components/dialog/dialog.vue b/packages/@headlessui-vue/examples/src/components/dialog/dialog.vue
index 124ab08..4a215ce 100644
--- a/packages/@headlessui-vue/examples/src/components/dialog/dialog.vue
+++ b/packages/@headlessui-vue/examples/src/components/dialog/dialog.vue
@@ -176,7 +176,7 @@ import {
   MenuItems,
   MenuItem,
   Portal,
-  Transition,
+  TransitionRoot,
   TransitionChild,
 } from '@headlessui/vue'
 import { usePopper } from '../../playground-utils/hooks/use-popper'
@@ -203,7 +203,7 @@ export default {
     MenuItems,
     MenuItem,
     Portal,
-    TransitionRoot: Transition,
+    TransitionRoot,
     TransitionChild,
   },
   setup() {
diff --git a/packages/@headlessui-vue/src/components/transitions/transition.test.ts b/packages/@headlessui-vue/src/components/transitions/transition.test.ts
index 74f7e7a..760c870 100644
--- a/packages/@headlessui-vue/src/components/transitions/transition.test.ts
+++ b/packages/@headlessui-vue/src/components/transitions/transition.test.ts
@@ -1,8 +1,8 @@
-import { defineComponent, ref, onMounted, h } from 'vue'
+import { defineComponent, ref, onMounted } from 'vue'
 import { render, fireEvent } from '../../test-utils/vue-testing-library'
 
 import { suppressConsoleLogs } from '../../test-utils/suppress-console-logs'
-import { Transition, TransitionChild } from './transition'
+import { TransitionRoot, TransitionChild } from './transition'
 
 import { executeTimeline } from '../../test-utils/execute-timeline'
 import { html } from '../../test-utils/html'
@@ -12,7 +12,7 @@ jest.mock('../../hooks/use-id')
 afterAll(() => jest.restoreAllMocks())
 
 function renderTemplate(input: string | Partial<Parameters<typeof defineComponent>[0]>) {
-  let defaultComponents = { TransitionRoot: Transition, TransitionChild }
+  let defaultComponents = { TransitionRoot, TransitionChild }
 
   if (typeof input === 'string') {
     return render(defineComponent({ template: input, components: defaultComponents }))
@@ -198,7 +198,9 @@ describe('Setup API', () => {
           `,
           errorCaptured(err) {
             expect(err as Error).toEqual(
-              new Error('A <TransitionChild /> is used but it is missing a parent <Transition />.')
+              new Error(
+                'A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.'
+              )
             )
             return false
           },
@@ -375,7 +377,7 @@ describe('Setup API', () => {
         })
 
         renderTemplate({
-          components: { TransitionRoot: Transition, TransitionChild, Dummy },
+          components: { TransitionRoot, TransitionChild, Dummy },
           template: html`
             <div class="My Page">
               <TransitionRoot :show="true">
@@ -398,7 +400,7 @@ describe('Setup API', () => {
   describe('transition classes', () => {
     it('should be possible to passthrough the transition classes', () => {
       let { container } = renderTemplate({
-        components: { TransitionRoot: Transition },
+        components: { TransitionRoot },
         template: html`
           <TransitionRoot
             :show="true"
@@ -462,7 +464,7 @@ describe('Transitions', () => {
       `)
 
       let Example = defineComponent({
-        components: { TransitionRoot: Transition },
+        components: { TransitionRoot },
         template: html`
           <TransitionRoot :show="show" enter="enter" enterFrom="from" enterTo="to">
             <span>Hello!</span>
@@ -517,7 +519,7 @@ describe('Transitions', () => {
       `)
 
       let Example = defineComponent({
-        components: { TransitionRoot: Transition },
+        components: { TransitionRoot },
         template: html`
           <TransitionRoot :show="show" enter="enter" enterFrom="from" enterTo="to">
             <span>Hello!</span>
@@ -572,7 +574,7 @@ describe('Transitions', () => {
       `)
 
       let Example = defineComponent({
-        components: { TransitionRoot: Transition },
+        components: { TransitionRoot },
         template: html`
           <TransitionRoot :show="show" :unmount="false" enter="enter" enterFrom="from" enterTo="to">
             <span>Hello!</span>
@@ -622,7 +624,7 @@ describe('Transitions', () => {
       `)
 
       let Example = defineComponent({
-        components: { TransitionRoot: Transition },
+        components: { TransitionRoot },
         template: html`
           <TransitionRoot :show="show" enter="enter" enterFrom="from" enterTo="to">
             <span>Hello!</span>
@@ -679,7 +681,7 @@ describe('Transitions', () => {
         `)
 
         let Example = defineComponent({
-          components: { TransitionRoot: Transition },
+          components: { TransitionRoot },
           template: html`
             <TransitionRoot :show="show" leave="leave" leaveFrom="from" leaveTo="to">
               <span>Hello!</span>
@@ -739,7 +741,7 @@ describe('Transitions', () => {
         `)
 
         let Example = defineComponent({
-          components: { TransitionRoot: Transition },
+          components: { TransitionRoot },
           template: html`
             <TransitionRoot
               :show="show"
@@ -806,7 +808,7 @@ describe('Transitions', () => {
         `)
 
         let Example = defineComponent({
-          components: { TransitionRoot: Transition },
+          components: { TransitionRoot },
           template: html`
             <TransitionRoot
               :show="show"
@@ -901,7 +903,7 @@ describe('Transitions', () => {
         `)
 
         let Example = defineComponent({
-          components: { TransitionRoot: Transition },
+          components: { TransitionRoot },
           template: html`
             <TransitionRoot
               :show="show"
@@ -1008,7 +1010,7 @@ describe('Transitions', () => {
         `)
 
         let Example = defineComponent({
-          components: { TransitionRoot: Transition, TransitionChild },
+          components: { TransitionRoot, TransitionChild },
           template: html`
             <TransitionRoot :show="show">
               <TransitionChild leave="leave-fast" leaveFrom="leave-from" leaveTo="leave-to">
@@ -1097,7 +1099,7 @@ describe('Transitions', () => {
         `)
 
         let Example = defineComponent({
-          components: { TransitionRoot: Transition, TransitionChild },
+          components: { TransitionRoot, TransitionChild },
           template: html`
             <TransitionRoot :show="show">
               <TransitionChild leave="leave-fast" leaveFrom="leave-from" leaveTo="leave-to">
@@ -1207,7 +1209,7 @@ describe('Events', () => {
       `)
 
       let Example = defineComponent({
-        components: { TransitionRoot: Transition },
+        components: { TransitionRoot },
         template: html`
           <TransitionRoot
             :show="show"
diff --git a/packages/@headlessui-vue/src/components/transitions/transition.ts b/packages/@headlessui-vue/src/components/transitions/transition.ts
index 0cd8aa5..379cd2d 100644
--- a/packages/@headlessui-vue/src/components/transitions/transition.ts
+++ b/packages/@headlessui-vue/src/components/transitions/transition.ts
@@ -43,7 +43,7 @@ function useTransitionContext() {
   let context = inject(TransitionContext, null)
 
   if (context === null) {
-    throw new Error('A <TransitionChild /> is used but it is missing a parent <Transition />.')
+    throw new Error('A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.')
   }
 
   return context
@@ -53,7 +53,7 @@ function useParentNesting() {
   let context = inject(NestingContext, null)
 
   if (context === null) {
-    throw new Error('A <TransitionChild /> is used but it is missing a parent <Transition />.')
+    throw new Error('A <TransitionChild /> is used but it is missing a parent <TransitionRoot />.')
   }
 
   return context
@@ -287,7 +287,7 @@ export let TransitionChild = defineComponent({
 
 // ---
 
-export let Transition = defineComponent({
+export let TransitionRoot = defineComponent({
   inheritAttrs: false,
   props: {
     as: { type: [Object, String], default: 'div' },
diff --git a/packages/@headlessui-vue/src/index.test.ts b/packages/@headlessui-vue/src/index.test.ts
index d3c23e5..376eb98 100644
--- a/packages/@headlessui-vue/src/index.test.ts
+++ b/packages/@headlessui-vue/src/index.test.ts
@@ -58,6 +58,6 @@ it('should expose the correct components', () => {
 
     // Transition
     'TransitionChild',
-    'Transition',
+    'TransitionRoot',
   ])
 })