From b051f13d8000db36c91a25566fbb1926136a843e Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 24 Sep 2020 13:41:16 -0400
Subject: [PATCH] docs: Add demo links

---
 packages/@headlessui-react/README.md | 40 ++++++++++++++++------------
 packages/@headlessui-vue/README.md   |  2 +-
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/@headlessui-react/README.md b/packages/@headlessui-react/README.md
index 1024da0..246baf2 100644
--- a/packages/@headlessui-react/README.md
+++ b/packages/@headlessui-react/README.md
@@ -15,7 +15,7 @@
 
 ## Installation
 
-```shell
+```sh
 # npm
 npm install @headlessui/react
 
@@ -52,6 +52,8 @@ We'll be continuing to develop new components on an on-going basis, with a goal
 
 ## Transition
 
+[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-menu-example-b6xje?file=/src/App.js)
+
 The `Transition` component lets you add enter/leave transitions to conditionally rendered elements, using CSS classes to control the actual transition styles in the different stages of the transition.
 
 - [Basic example](#basic-example)
@@ -369,6 +371,8 @@ function MyComponent({ isShowing }) {
 
 ## Menu Button (Dropdown)
 
+[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuireact-menu-example-b6xje?file=/src/App.js)
+
 The `Menu` component and related child components are used to quickly build custom dropdown components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support.
 
 - [Basic example](#basic-example-1)
@@ -535,23 +539,25 @@ function MyDropdown() {
   return (
     <Menu>
       {({ open }) => (
-        <Menu.Button>More</Menu.Button>
+        <>
+          <Menu.Button>More</Menu.Button>
 
-        {/* Use the Transition + open render prop argument to add transitions. */}
-        <Transition
-          show={open}
-          enter="transition duration-100 ease-out"
-          enterFrom="transform scale-95 opacity-0"
-          enterTo="transform scale-100 opacity-100"
-          leave="transition duration-75 ease-out"
-          leaveFrom="transform scale-100 opacity-100"
-          leaveTo="transform scale-95 opacity-0"
-        >
-          <Menu.Items static>
-            <Menu.Item>{/* ... */}</Menu.Item>
-            {/* ... */}
-          </Menu.Items>
-        </Transition>
+          {/* Use the Transition + open render prop argument to add transitions. */}
+          <Transition
+            show={open}
+            enter="transition duration-100 ease-out"
+            enterFrom="transform scale-95 opacity-0"
+            enterTo="transform scale-100 opacity-100"
+            leave="transition duration-75 ease-out"
+            leaveFrom="transform scale-100 opacity-100"
+            leaveTo="transform scale-95 opacity-0"
+          >
+            <Menu.Items static>
+              <Menu.Item>{/* ... */}</Menu.Item>
+              {/* ... */}
+            </Menu.Items>
+          </Transition>
+        </>
       )}
     </Menu>
   )
diff --git a/packages/@headlessui-vue/README.md b/packages/@headlessui-vue/README.md
index a956c52..046dfe9 100644
--- a/packages/@headlessui-vue/README.md
+++ b/packages/@headlessui-vue/README.md
@@ -53,7 +53,7 @@ We'll be continuing to develop new components on an on-going basis, with a goal
 
 ## Menu Button (Dropdown)
 
-[View complete demo on CodeSandbox](https://codesandbox.io/s/flamboyant-glade-b2jb4?file=/src/App.vue)
+[View live demo on CodeSandbox](https://codesandbox.io/s/headlessuivue-menu-example-70br3?file=/src/App.vue)
 
 The `Menu` component and related child components are used to quickly build custom dropdown components that are fully accessible out of the box, including correct ARIA attribute management and robust keyboard navigation support.