diff --git a/packages/playground-react/package.json b/packages/playground-react/package.json
index b8d7353..edd8bf2 100644
--- a/packages/playground-react/package.json
+++ b/packages/playground-react/package.json
@@ -28,5 +28,8 @@
"react-dom": "^18.0.0",
"react-flatpickr": "^3.10.9",
"tailwindcss": "^3.2.7"
+ },
+ "devDependencies": {
+ "@floating-ui/react": "^0.24.8"
}
}
diff --git a/packages/playground-react/pages/menu/menu-with-floating-ui.tsx b/packages/playground-react/pages/menu/menu-with-floating-ui.tsx
new file mode 100644
index 0000000..db92321
--- /dev/null
+++ b/packages/playground-react/pages/menu/menu-with-floating-ui.tsx
@@ -0,0 +1,94 @@
+import React, { ReactNode, useState, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { Menu } from '@headlessui/react'
+import { useFloating, offset } from '@floating-ui/react'
+
+import { classNames } from '../../utils/class-names'
+import { Button } from '../../components/button'
+
+export default function Home() {
+ let { refs, floatingStyles } = useFloating({
+ placement: 'bottom-end',
+ strategy: 'fixed',
+ middleware: [offset(10)],
+ })
+
+ function resolveClass({ active, disabled }) {
+ return classNames(
+ 'block w-full text-left px-4 py-2 text-sm leading-5 text-gray-700',
+ active && 'bg-gray-100 text-gray-900',
+ disabled && 'cursor-not-allowed opacity-50'
+ )
+ }
+
+ return (
+
+
+
+
+
+
+
+
+