diff --git a/website/lib/components/Button.js b/website/lib/components/Button.js
new file mode 100644
index 0000000000..9be7adf72f
--- /dev/null
+++ b/website/lib/components/Button.js
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {twMerge} from 'tailwind-merge';
+
+export const Button = React.forwardRef(function Button(
+  props,
+  ref
+) {
+  return (
+    <button
+      {...props}
+      ref={ref}
+      className={twMerge(
+        'cursor-default bg-gray-100/75 dark:bg-gray-800/95 rounded p-2 px-3',
+        'transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-600',
+        'data-[open]:bg-gray-200/50 dark:data-[open]:bg-gray-600',
+        props.className
+      )}
+    />
+  );
+});
diff --git a/website/lib/components/Dialog.js b/website/lib/components/Dialog.js
new file mode 100644
index 0000000000..70ac52f317
--- /dev/null
+++ b/website/lib/components/Dialog.js
@@ -0,0 +1,219 @@
+import {
+  FloatingFocusManager,
+  FloatingOverlay,
+  FloatingPortal,
+  useClick,
+  useDismiss,
+  useFloating,
+  useId,
+  useInteractions,
+  useMergeRefs,
+  useRole,
+  useTransitionStyles,
+} from '@floating-ui/react';
+import * as React from 'react';
+
+export function useDialog({
+  initialOpen = false,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] =
+    React.useState(initialOpen);
+  const [labelId, setLabelId] = React.useState();
+  const [descriptionId, setDescriptionId] = React.useState();
+
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const data = useFloating({
+    open,
+    onOpenChange: setOpen,
+  });
+
+  const context = data.context;
+
+  const click = useClick(context, {
+    enabled: controlledOpen == null,
+  });
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: 'mousedown',
+  });
+  const role = useRole(context);
+
+  const interactions = useInteractions([click, dismiss, role]);
+
+  return React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+    }),
+    [open, setOpen, interactions, data, labelId, descriptionId]
+  );
+}
+
+const DialogContext = React.createContext(null);
+
+export const useDialogContext = () => {
+  const context = React.useContext(DialogContext);
+
+  if (context == null) {
+    throw new Error(
+      'Dialog components must be wrapped in <Dialog />'
+    );
+  }
+
+  return context;
+};
+
+export function Dialog({children, ...options}) {
+  const dialog = useDialog(options);
+  return (
+    <DialogContext.Provider value={dialog}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+export const DialogTrigger = React.forwardRef(
+  function DialogTrigger(
+    {children, asChild = false, ...props},
+    propRef
+  ) {
+    const context = useDialogContext();
+    const childrenRef = children.ref;
+    const ref = useMergeRefs([
+      context.refs.setReference,
+      propRef,
+      childrenRef,
+    ]);
+
+    // `asChild` allows the user to pass any element as the anchor
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(
+        children,
+        context.getReferenceProps({
+          ref,
+          ...props,
+          ...children.props,
+          'data-state': context.open ? 'open' : 'closed',
+        })
+      );
+    }
+
+    return (
+      <button
+        ref={ref}
+        // The user can style the trigger based on the state
+        data-state={context.open ? 'open' : 'closed'}
+        {...context.getReferenceProps(props)}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+export const DialogContent = React.forwardRef(
+  function DialogContent(props, propRef) {
+    const {context: floatingContext, ...context} =
+      useDialogContext();
+    const ref = useMergeRefs([
+      context.refs.setFloating,
+      propRef,
+    ]);
+
+    const {isMounted, styles} = useTransitionStyles(
+      floatingContext,
+      {
+        duration: {open: 400},
+      }
+    );
+
+    return (
+      <FloatingPortal>
+        {isMounted && (
+          <FloatingOverlay
+            className="bg-gray-1000/60 backdrop-blur-sm grid place-items-center text-black"
+            lockScroll
+          >
+            <FloatingFocusManager context={floatingContext}>
+              <div
+                ref={ref}
+                aria-labelledby={context.labelId}
+                aria-describedby={context.descriptionId}
+                style={styles}
+                {...context.getFloatingProps(props)}
+              >
+                {props.children}
+              </div>
+            </FloatingFocusManager>
+          </FloatingOverlay>
+        )}
+      </FloatingPortal>
+    );
+  }
+);
+
+export const DialogHeading = React.forwardRef(
+  function DialogHeading({children, ...props}, ref) {
+    const {setLabelId} = useDialogContext();
+    const id = useId();
+
+    // Only sets `aria-labelledby` on the Dialog root element
+    // if this component is mounted inside it.
+    React.useLayoutEffect(() => {
+      setLabelId(id);
+      return () => setLabelId(undefined);
+    }, [id, setLabelId]);
+
+    return (
+      <h2 {...props} ref={ref} id={id}>
+        {children}
+      </h2>
+    );
+  }
+);
+
+export const DialogDescription = React.forwardRef(
+  function DialogDescription({children, ...props}, ref) {
+    const {setDescriptionId} = useDialogContext();
+    const id = useId();
+
+    // Only sets `aria-describedby` on the Dialog root element
+    // if this component is mounted inside it.
+    React.useLayoutEffect(() => {
+      setDescriptionId(id);
+      return () => setDescriptionId(undefined);
+    }, [id, setDescriptionId]);
+
+    return (
+      <p {...props} ref={ref} id={id}>
+        {children}
+      </p>
+    );
+  }
+);
+
+export const DialogClose = React.forwardRef(function DialogClose(
+  {children, ...props},
+  ref
+) {
+  const {setOpen} = useDialogContext();
+  return (
+    <button
+      type="button"
+      {...props}
+      ref={ref}
+      onClick={() => setOpen(false)}
+    >
+      {children}
+    </button>
+  );
+});
diff --git a/website/lib/components/Layout.js b/website/lib/components/Layout.js
index 4456caf8d4..3ba36f669e 100644
--- a/website/lib/components/Layout.js
+++ b/website/lib/components/Layout.js
@@ -136,6 +136,13 @@ const interactions = [
     depth: 1,
     mono: true,
   },
+  {
+    url: '/docs/useClientPoint',
+    title: 'useClientPoint',
+    icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAU1QTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsY4lIQAAAG90Uk5TAAQpQ1FSJwtOlMrp9v3oyw0DVtT/21cCKs3+xgFN3FvySDj3PRvJ2o417eNnJQcGbB2b9IMVj2GromjvPIy+v6mCqJGQi8Jq8CRpOrSub26w/CYFa0EMEsjhRrst5ln40tAWPuDrT1TnRzbTLLoJRC0RjAAAAcdJREFUeJzVles7AkEUxie5bMolhsgipUS1IZVbCBXKJeTexTWX9P9/tE/NrN3OzFafPN6P7/m9zzx75pxZhP6HDB3Gzi5jt6E1ukcw9ZotfX2W/gGTMNgUtw4NY5VGRm36/Ng41so+MaaDi5MjGGhKELmBaQfkMXbM8Hini8Vj7Jpl824Pm8d4zs0MeHk8xl4WP7+gdMbnD0jBwKLPTp2FJUZgmVZDK+G6E14JUS8CeatyQFS5K1tUOcIKW0Rrq2p3jbpOEFgnlY1NtRvYILYfBGKksqW5V3Gb2DEQoIc3fF6E2GsgsEMqca0dJ/Yu94Q9rb3PPSFBKklNA8UksRMgkCKVA82kHdIuHYFAmnY8o3aPqZsGAUnZhRNl+Q2n1HNIIIAytMiapTPIo2iWVuVpPZcuApe/05rNMQJX3P3B2BNkBFDKzg2kWDy6vuHxt9fMAMrxAndsHlnv2XwGbg/RQ57F59lvRk2FIuSLBT6PpAQMxBiXrEqUGvlHXV4ez4ZE6UmfR+j5Rc2/Pjfj5fdG9eFFzjOslWCmvPmtFR6J5fc6/17m/0q0ibvaHoQ+WuRlfcq9+tL7uQFVvicq7fAIVavt8X+pH2AHXX0SoLBwAAAAAElFTkSuQmCC',
+    depth: 1,
+    mono: true,
+  },
   {
     url: '/docs/useMergeRefs',
     title: 'useMergeRefs',
diff --git a/website/lib/components/Logos.js b/website/lib/components/Logos.js
index cba20e597f..1b8cbaa127 100644
--- a/website/lib/components/Logos.js
+++ b/website/lib/components/Logos.js
@@ -8,14 +8,14 @@ import {
 
 export function Logos({items}) {
   return (
-    <div className="gap-8 flex flex-wrap justify-center my-10 invert dark:invert-0">
+    <div className="flex flex-wrap justify-center my-10 invert dark:invert-0">
       <FloatingDelayGroup delay={{open: 1000, close: 200}}>
         {items.map((item) => (
           <Tooltip key={item.label} content={item.label}>
             <TooltipTrigger asChild>
               <a
                 href={item.url}
-                className="opacity-70 dark:opacity-30 hover:opacity-100 transition-opacity"
+                className="opacity-70 dark:opacity-30 hover:opacity-100 transition-opacity px-4"
                 rel="noopener noreferrer"
               >
                 <img
diff --git a/website/lib/components/Popover.js b/website/lib/components/Popover.js
new file mode 100644
index 0000000000..1f50dd4cb1
--- /dev/null
+++ b/website/lib/components/Popover.js
@@ -0,0 +1,291 @@
+import {
+  arrow,
+  autoUpdate,
+  flip,
+  FloatingArrow,
+  FloatingFocusManager,
+  FloatingPortal,
+  limitShift,
+  offset,
+  shift,
+  useClick,
+  useDismiss,
+  useFloating,
+  useId,
+  useInteractions,
+  useMergeRefs,
+  useRole,
+  useTransitionStyles,
+} from '@floating-ui/react';
+import * as React from 'react';
+
+export function usePopover({
+  initialOpen = false,
+  placement = 'bottom',
+  modal,
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] =
+    React.useState(initialOpen);
+  const [labelId, setLabelId] = React.useState();
+  const [descriptionId, setDescriptionId] = React.useState();
+
+  const arrowRef = React.useRef(null);
+
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+
+  const data = useFloating({
+    placement,
+    open,
+    onOpenChange: setOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(10),
+      flip({
+        fallbackAxisSideDirection: 'end',
+        crossAxis: false,
+      }),
+      shift({
+        limiter: limitShift({offset: 15}),
+      }),
+      arrow({
+        element: arrowRef,
+        padding: 5,
+      }),
+    ],
+  });
+
+  const context = data.context;
+
+  const click = useClick(context, {
+    enabled: controlledOpen == null,
+  });
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+
+  const interactions = useInteractions([click, dismiss, role]);
+
+  const transition = useTransitionStyles(context, {
+    duration: {
+      open: 300,
+      close: 75,
+    },
+    initial: ({side}) => ({
+      opacity: 0,
+      transform: {
+        top: 'translateY(-0.5rem)',
+        right: 'translateX(0.5rem)',
+        bottom: 'translateY(0.5rem)',
+        left: 'translateX(-0.5rem)',
+      }[side],
+    }),
+    close: () => ({
+      opacity: 0,
+      transform: 'scale(0.97)',
+    }),
+  });
+
+  return React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      ...interactions,
+      ...data,
+      ...transition,
+      modal,
+      labelId,
+      descriptionId,
+      setLabelId,
+      setDescriptionId,
+      arrowRef,
+    }),
+    [
+      open,
+      setOpen,
+      interactions,
+      data,
+      modal,
+      labelId,
+      descriptionId,
+      transition,
+    ]
+  );
+}
+
+const PopoverContext = React.createContext(null);
+
+export const usePopoverContext = () => {
+  const context = React.useContext(PopoverContext);
+
+  if (context == null) {
+    throw new Error(
+      'Popover components must be wrapped in <Popover />'
+    );
+  }
+
+  return context;
+};
+
+export function Popover({
+  children,
+  modal = false,
+  ...restOptions
+}) {
+  // This can accept any props as options, e.g. `placement`,
+  // or other positioning options.
+  const popover = usePopover({modal, ...restOptions});
+  return (
+    <PopoverContext.Provider value={popover}>
+      {children}
+    </PopoverContext.Provider>
+  );
+}
+
+export const PopoverTrigger = React.forwardRef(
+  function PopoverTrigger(
+    {children, asChild = false, ...props},
+    propRef
+  ) {
+    const context = usePopoverContext();
+    const childrenRef = children.ref;
+    const ref = useMergeRefs([
+      context.refs.setReference,
+      propRef,
+      childrenRef,
+    ]);
+
+    // `asChild` allows the user to pass any element as the anchor
+    if (asChild && React.isValidElement(children)) {
+      return React.cloneElement(
+        children,
+        context.getReferenceProps({
+          ref,
+          ...props,
+          ...children.props,
+          'data-state': context.open ? 'open' : 'closed',
+        })
+      );
+    }
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        // The user can style the trigger based on the state
+        data-state={context.open ? 'open' : 'closed'}
+        {...context.getReferenceProps(props)}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+export const PopoverContent = React.forwardRef(
+  function PopoverContent(props, propRef) {
+    const {context: floatingContext, ...context} =
+      usePopoverContext();
+    const ref = useMergeRefs([
+      context.refs.setFloating,
+      propRef,
+    ]);
+
+    return (
+      <FloatingPortal>
+        {context.isMounted && (
+          <FloatingFocusManager
+            context={floatingContext}
+            modal={context.modal}
+          >
+            <div
+              ref={ref}
+              style={{
+                position: context.strategy,
+                top: context.y ?? 0,
+                left: context.x ?? 0,
+                width: 'max-content',
+                ...props.style,
+                ...context.styles,
+              }}
+              aria-labelledby={context.labelId}
+              aria-describedby={context.descriptionId}
+              {...context.getFloatingProps(props)}
+            >
+              {props.children}
+              <FloatingArrow
+                ref={context.arrowRef}
+                context={floatingContext}
+                height={10}
+                fill="white"
+                stroke="rgba(0,0,0,0.1)"
+                strokeWidth={1}
+                tipRadius={2}
+              />
+            </div>
+          </FloatingFocusManager>
+        )}
+      </FloatingPortal>
+    );
+  }
+);
+
+export const PopoverHeading = React.forwardRef(
+  function PopoverHeading({children, ...props}, ref) {
+    const {setLabelId} = usePopoverContext();
+    const id = useId();
+
+    // Only sets `aria-labelledby` on the Popover root element
+    // if this component is mounted inside it.
+    React.useLayoutEffect(() => {
+      setLabelId(id);
+      return () => setLabelId(undefined);
+    }, [id, setLabelId]);
+
+    return (
+      <h2 {...props} ref={ref} id={id}>
+        {children}
+      </h2>
+    );
+  }
+);
+
+export const PopoverDescription = React.forwardRef(
+  function PopoverDescription({children, ...props}, ref) {
+    const {setDescriptionId} = usePopoverContext();
+    const id = useId();
+
+    // Only sets `aria-describedby` on the Popover root element
+    // if this component is mounted inside it.
+    React.useLayoutEffect(() => {
+      setDescriptionId(id);
+      return () => setDescriptionId(undefined);
+    }, [id, setDescriptionId]);
+
+    return (
+      <p {...props} ref={ref} id={id}>
+        {children}
+      </p>
+    );
+  }
+);
+
+export const PopoverClose = React.forwardRef(
+  function PopoverClose({children, ...props}, ref) {
+    const {setOpen} = usePopoverContext();
+    return (
+      <button
+        type="button"
+        {...props}
+        ref={ref}
+        onClick={(event) => {
+          props.onClick?.(event);
+          setOpen(false);
+        }}
+      >
+        {children}
+      </button>
+    );
+  }
+);
diff --git a/website/lib/components/Tooltip.js b/website/lib/components/Tooltip.js
index 1500c1cce8..e986760b85 100644
--- a/website/lib/components/Tooltip.js
+++ b/website/lib/components/Tooltip.js
@@ -1,6 +1,8 @@
 import {
+  arrow,
   autoUpdate,
   flip,
+  FloatingArrow,
   FloatingPortal,
   inline,
   offset,
@@ -16,6 +18,7 @@ import {
   useRole,
   useTransitionStyles,
 } from '@floating-ui/react';
+import classNames from 'classnames';
 import * as React from 'react';
 import {useId} from 'react';
 
@@ -29,6 +32,8 @@ export function useTooltip({
   const [uncontrolledOpen, setUncontrolledOpen] =
     React.useState(initialOpen);
 
+  const arrowRef = React.useRef(null);
+
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
 
@@ -45,6 +50,10 @@ export function useTooltip({
         crossAxis: placement.includes('-'),
       }),
       shift({padding: 5}),
+      arrow({
+        element: arrowRef,
+        padding: 4,
+      }),
     ],
   });
 
@@ -53,7 +62,7 @@ export function useTooltip({
   const hover = useHover(context, {
     move: false,
     enabled: controlledOpen == null,
-    restMs: isInstantPhase ? 0 : 50,
+    restMs: isInstantPhase ? 0 : 150,
     delay,
   });
   const focus = useFocus(context, {
@@ -75,6 +84,7 @@ export function useTooltip({
       setOpen,
       ...interactions,
       ...data,
+      arrowRef,
     }),
     [open, setOpen, interactions, data]
   );
@@ -165,8 +175,8 @@ export const TooltipContent = React.forwardRef(
       floatingContext,
       {
         duration: isInstantPhase
-          ? {open: 100, close: id === currentId ? 500 : 100}
-          : {open: 500, close: 150},
+          ? {open: 100, close: id === currentId ? 150 : 50}
+          : {open: 300, close: 150},
         initial: {
           opacity: 0,
           transform: 'scale(0.95)',
@@ -179,21 +189,29 @@ export const TooltipContent = React.forwardRef(
         {isMounted && (
           <div
             ref={ref}
-            className="
-              bg-gray-50 shadow-lg dark:bg-gray-600 text-gray-1000 
-              dark:text-gray-50 rounded p-2 text-sm pointer-events-none
-            "
+            className={classNames(
+              'bg-gray-600 shadow-lg text-white',
+              'rounded p-2 text-sm pointer-events-none cursor-default',
+              props.className
+            )}
             style={{
               position: context.strategy,
-              top: context.y ?? 0,
-              left: context.x ?? 0,
+              top: Math.round(context.y ?? 0),
+              left: Math.round(context.x ?? 0),
               width: 'max-content',
               maxWidth: 'min(calc(100vw - 10px), 25rem)',
               ...props.style,
               ...styles,
             }}
             {...context.getFloatingProps(props)}
-          />
+          >
+            {props.children}
+            <FloatingArrow
+              ref={context.arrowRef}
+              context={floatingContext}
+              className="fill-gray-600"
+            />
+          </div>
         )}
       </FloatingPortal>
     );
diff --git a/website/package-lock.json b/website/package-lock.json
index 0349f8746e..62aa752bfc 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -12,7 +12,7 @@
       "dependencies": {
         "@docsearch/css": "^3.1.0",
         "@docsearch/react": "^3.1.0",
-        "@floating-ui/react": "^0.20.1",
+        "@floating-ui/react": "^0.21.0",
         "@mdx-js/loader": "^2.1.1",
         "@mdx-js/react": "^2.1.1",
         "@next/mdx": "^12.1.5",
@@ -27,6 +27,7 @@
         "rehype-pretty-code": "^0.9.4",
         "remark-smartypants": "^2.0.0",
         "shiki": "^0.12.1",
+        "tailwind-merge": "^1.10.0",
         "unist-util-visit": "^2.0.3",
         "use-isomorphic-layout-effect": "^1.1.1"
       },
@@ -1892,9 +1893,9 @@
       }
     },
     "node_modules/@floating-ui/react": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.20.1.tgz",
-      "integrity": "sha512-JHTHJ+/YsIxNFH8uJDFa5OyI6dSUZcle6wAFe0zRTjgWD+rkACfBBoJtx2itTtn7C4a7xAz4jgxdEQcMel194g==",
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.21.0.tgz",
+      "integrity": "sha512-4Zut7tjeDVEKHaR6N3uG4m1dl114UkLuK4SNAeHlAb4pKu5KEkMkI34Y8NmCc4ARfXIu25UGUhYBUzShDhbofA==",
       "dependencies": {
         "@floating-ui/react-dom": "^1.3.0",
         "aria-hidden": "^1.1.3",
@@ -7379,6 +7380,11 @@
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.1.1.tgz",
       "integrity": "sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg=="
     },
+    "node_modules/tailwind-merge": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.10.0.tgz",
+      "integrity": "sha512-WFnDXSS4kFTZwjKg5/oZSGzBRU/l+qcbv5NVTzLUQvJ9yovDAP05h0F2+ZFW0Lw9EcgRoc2AfURUdZvnEFrXKg=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
@@ -9437,9 +9443,9 @@
       }
     },
     "@floating-ui/react": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.20.1.tgz",
-      "integrity": "sha512-JHTHJ+/YsIxNFH8uJDFa5OyI6dSUZcle6wAFe0zRTjgWD+rkACfBBoJtx2itTtn7C4a7xAz4jgxdEQcMel194g==",
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.21.0.tgz",
+      "integrity": "sha512-4Zut7tjeDVEKHaR6N3uG4m1dl114UkLuK4SNAeHlAb4pKu5KEkMkI34Y8NmCc4ARfXIu25UGUhYBUzShDhbofA==",
       "requires": {
         "@floating-ui/react-dom": "^1.3.0",
         "aria-hidden": "^1.1.3",
@@ -13253,6 +13259,11 @@
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.1.1.tgz",
       "integrity": "sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg=="
     },
+    "tailwind-merge": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.10.0.tgz",
+      "integrity": "sha512-WFnDXSS4kFTZwjKg5/oZSGzBRU/l+qcbv5NVTzLUQvJ9yovDAP05h0F2+ZFW0Lw9EcgRoc2AfURUdZvnEFrXKg=="
+    },
     "tailwindcss": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.4.tgz",
diff --git a/website/package.json b/website/package.json
index 7285a08333..aea5a9daeb 100644
--- a/website/package.json
+++ b/website/package.json
@@ -30,7 +30,7 @@
   "dependencies": {
     "@docsearch/css": "^3.1.0",
     "@docsearch/react": "^3.1.0",
-    "@floating-ui/react": "^0.20.1",
+    "@floating-ui/react": "^0.21.0",
     "@mdx-js/loader": "^2.1.1",
     "@mdx-js/react": "^2.1.1",
     "@next/mdx": "^12.1.5",
@@ -45,6 +45,7 @@
     "rehype-pretty-code": "^0.9.4",
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.12.1",
+    "tailwind-merge": "^1.10.0",
     "unist-util-visit": "^2.0.3",
     "use-isomorphic-layout-effect": "^1.1.1"
   }
diff --git a/website/pages/docs/FloatingArrow.mdx b/website/pages/docs/FloatingArrow.mdx
index 82da88b8d5..20feae400e 100644
--- a/website/pages/docs/FloatingArrow.mdx
+++ b/website/pages/docs/FloatingArrow.mdx
@@ -196,7 +196,8 @@ The color of the arrow.
 
 default: `"none"{:js}`
 
-The stroke (border) color of the arrow.
+The stroke (border) color of the arrow. This must match (or be
+less than) the floating element's border width.
 
 ```js
 <FloatingArrow ref={arrowRef} context={context} stroke="red" />
diff --git a/website/pages/docs/react.mdx b/website/pages/docs/react.mdx
index 94cd93dafa..3ac70a1b35 100644
--- a/website/pages/docs/react.mdx
+++ b/website/pages/docs/react.mdx
@@ -8,24 +8,17 @@ This allows you to create components such as tooltips, popovers,
 dropdown menus, hover cards, modal dialogs, select menus,
 comboboxes, and more.
 
-## Library goals
-
-The goal of this library is to provide **building blocks** to
-create your own floating UI components, handling difficult parts
-like accessibility and positioning for you, but not offering
-pre-built components. In theory, this allows you to build any
-type of component you desire, since you can add your own custom
-logic on top.
-
-If you're looking for flexibility and are comfortable building
-your own components, this library is hopefully what you're
-looking for. If instead, you're looking for something simpler and
-ready-made, you will likely find other libraries better suited
-for your use case. React component libraries that use Floating UI
-behind the scenes for positioning include
-[Radix UI](https://www.radix-ui.com/),
-[Mantine](https://mantine.dev/), [Ariakit](https://ariakit.org/),
-among others.
+## Goals
+
+- **Provide building blocks to create your own floating UI
+  components**: pre-built components aren't exported, rather the
+  primitives necessary to create them.
+- **Accessibility-first mindset**: the building blocks ensure
+  accessible user experiences and work with assistive technology.
+- **Low-level, extremely configurable and flexible**: At the cost
+  of more code to setup, you get high control and flexibility, so
+  you can create "bespoke" and complex floating elements you
+  won't find in most component libraries.
 
 ## Install
 
@@ -43,13 +36,6 @@ and uses this one as a dependency.
 npm install @floating-ui/react-dom
 ```
 
-This documentation refers to the latest version of the library.
-If you find a feature is missing locally, make sure you have
-upgraded to the latest version:
-
-- [Latest `@floating-ui/react` versions](https://www.npmjs.com/package/@floating-ui/react?activeTab=versions)
-- [Latest `@floating-ui/react-dom` versions](https://www.npmjs.com/package/@floating-ui/react-dom?activeTab=versions)
-
 ## Usage
 
 There are two main parts to creating floating elements:
diff --git a/website/pages/docs/useClientPoint.mdx b/website/pages/docs/useClientPoint.mdx
new file mode 100644
index 0000000000..763c9b81fe
--- /dev/null
+++ b/website/pages/docs/useClientPoint.mdx
@@ -0,0 +1,135 @@
+# useClientPoint
+
+Positions the floating element at a given client point `(x, y)`,
+usually generated by a mouse event. By default, the client's
+mouse position is automatically tracked.
+
+```js
+import {useClientPoint} from '@floating-ui/react';
+```
+
+## Usage
+
+This hook is an interaction hook that returns event handler
+props.
+
+To use it, pass it the `context{:.const}` object returned from
+`useFloating(){:js}`, and then feed its result into the
+`useInteractions(){:js}` array. The returned prop getters are
+then spread onto the elements for rendering.
+
+```js {9-13} /context/
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const {x, y, strategy, refs, context} = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+  });
+
+  const clientPoint = useClientPoint(context);
+
+  const {getReferenceProps, getFloatingProps} = useInteractions([
+    clientPoint,
+  ]);
+
+  return (
+    <>
+      <div ref={refs.setReference} {...getReferenceProps()}>
+        Reference element
+      </div>
+      {isOpen && (
+        <div
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+          }}
+          {...getFloatingProps()}
+        >
+          Floating element
+        </div>
+      )}
+    </>
+  );
+}
+```
+
+The default behavior is to follow the mouse cursor `clientX` and
+`clientY` coordinates.
+
+## Pointer events
+
+If the floating element is not interactive, disable pointer
+events:
+
+```css
+.floating {
+  pointer-events: none;
+}
+```
+
+This will ensure that the floating element does not block point
+updates.
+
+## Props
+
+```ts
+interface Props {
+  enabled?: boolean;
+  axis?: 'both' | 'x' | 'y';
+  x?: number | null;
+  y?: number | null;
+}
+```
+
+### enabled
+
+default: `true{:js}`
+
+Conditionally enable/disable the hook.
+
+```js
+useClientPoint(context, {
+  enabled: false,
+});
+```
+
+### axis
+
+default: `'both'{:js}`
+
+Whether to restrict the client point to an axis and use the
+reference element (if it exists) as the other axis. This can be
+useful if the floating element is also interactive.
+
+```js
+useClientPoint(context, {
+  axis: 'x',
+});
+```
+
+### x
+
+default: `null{:js}`
+
+An explicitly defined `x` client coordinate.
+
+```js
+useClientPoint(context, {
+  x: 100,
+});
+```
+
+### y
+
+default: `null{:js}`
+
+An explicitly defined `y` client coordinate.
+
+```js
+useClientPoint(context, {
+  y: 100,
+});
+```
diff --git a/website/pages/docs/useDismiss.mdx b/website/pages/docs/useDismiss.mdx
index d10bf3e1b4..b2a0f2b577 100644
--- a/website/pages/docs/useDismiss.mdx
+++ b/website/pages/docs/useDismiss.mdx
@@ -217,7 +217,7 @@ useDismiss(context, {
 
 ### bubbles
 
-default: `true{:js}`
+default: `undefined{:js}`
 
 When dealing with nested floating elements, this determines
 whether the dismissal bubbles through the entire
@@ -244,9 +244,8 @@ Any omitted events will use the default value.
 ```js
 useDismiss(context, {
   bubbles: {
-    escapeKey: false,
-    // can be omitted, same as default
-    outsidePress: true,
+    escapeKey: true, // false by default
+    outsidePress: false, // true by default
   },
 });
 ```
diff --git a/website/pages/docs/useTypeahead.mdx b/website/pages/docs/useTypeahead.mdx
index a237d98fe3..9da5f80373 100644
--- a/website/pages/docs/useTypeahead.mdx
+++ b/website/pages/docs/useTypeahead.mdx
@@ -89,6 +89,7 @@ interface Props {
   resetMs?: number;
   ignoreKeys?: Array<string>;
   selectedIndex?: number | null;
+  onTypingChange?: (isTyping) => void;
 }
 ```
 
@@ -193,7 +194,7 @@ useTypeahead(context, {
 
 ### resetMs
 
-default: `1000{:js}`
+default: `750{:js}`
 
 Debounce timeout which will reset the transient string as the
 user types.
@@ -230,11 +231,16 @@ useTypeahead(context, {
 });
 ```
 
-## Data
+### onTypingChange
 
-### typing
+default: no-op
+
+Callback invoked with the typing state as the user types.
 
-This hook sets `context.dataRef.current.typing = boolean{:js}` to
-determine if the user is currently typing. If a select option
-needs to be selected with `Space`, but the typeahead also allows
-spaces, this can be used to conditionally run the handler.
+```js
+useTypeahead(context, {
+  onTypingChange(isTyping) {
+    // ...
+  },
+});
+```
diff --git a/website/pages/index.js b/website/pages/index.js
index cc1931303e..55ef0cdedd 100644
--- a/website/pages/index.js
+++ b/website/pages/index.js
@@ -1,11 +1,40 @@
 import {
+  autoUpdate,
+  flip,
+  FloatingDelayGroup,
+  FloatingFocusManager,
+  FloatingNode,
+  FloatingPortal,
+  FloatingTree,
   getOverflowAncestors,
+  offset,
+  safePolygon,
   shift,
+  size,
+  useClick,
+  useDismiss,
   useFloating,
+  useFloatingNodeId,
+  useFloatingParentNodeId,
+  useFloatingTree,
+  useHover,
+  useInteractions,
+  useListNavigation,
+  useMergeRefs,
+  useRole,
+  useTransitionStyles,
+  useTypeahead,
 } from '@floating-ui/react';
+import classNames from 'classnames';
 import cn from 'classnames';
 import Head from 'next/head';
 import Link from 'next/link';
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useId,
+} from 'react';
 import {
   forwardRef,
   useCallback,
@@ -13,16 +42,40 @@ import {
   useRef,
   useState,
 } from 'react';
-import {ArrowRight, GitHub} from 'react-feather';
+import {
+  ArrowRight,
+  BarChart,
+  Check,
+  ChevronRight,
+  Edit,
+  GitHub,
+  Heart,
+  Share,
+} from 'react-feather';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 
 import Logo from '../assets/logo.svg';
 import Text from '../assets/text.svg';
 import {MINI_SPONSORS, SPONSORS} from '../data';
+import {Button} from '../lib/components/Button';
 import {Cards} from '../lib/components/Cards';
 import {Chrome} from '../lib/components/Chrome';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogTrigger,
+} from '../lib/components/Dialog';
 import {Floating} from '../lib/components/Floating';
 import {Logos} from '../lib/components/Logos';
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '../lib/components/Popover';
 import {
   Tooltip,
   TooltipContent,
@@ -509,6 +562,831 @@ function Virtual() {
   );
 }
 
+function PopoverDemo() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [name, setName] = useState('Balloon name');
+  const [editName, setEditName] = useState(name);
+
+  return (
+    <div className="flex items-center gap-2 h-14">
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            className="bg-transparent dark:bg-transparent data-[state=open]:bg-gray-100/50 dark:data-[state=open]:bg-gray-600 flex gap-2 items-center"
+            onClick={() => setIsOpen((v) => !v)}
+            aria-label={`${name} - Edit`}
+          >
+            <span className="text-lg font-bold">{name}</span>
+            <Edit size={20} />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="rounded-lg bg-white dark:text-black bg-clip-padding border border-gray-900/10 shadow-lg shadow-blue-900/10 p-4">
+          <h2 className="text-lg font-bold mb-2">Edit name</h2>
+          <div className="flex items-center gap-2">
+            <input
+              className="py-1 px-2 border border-gray-600 dark:bg-white focus:border-blue-500 outline-none rounded"
+              value={editName}
+              onChange={(event) =>
+                setEditName(event.target.value)
+              }
+              maxLength={20}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  setName(editName);
+                  setIsOpen(false);
+                }
+              }}
+            />
+            <PopoverClose
+              aria-label="Confirm"
+              className="py-1 text-sm"
+              onClick={() => {
+                setName(editName);
+              }}
+            >
+              <Check />
+            </PopoverClose>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+const options = [
+  'Red',
+  'Orange',
+  'Yellow',
+  'Green',
+  'Cyan',
+  'Blue',
+  'Purple',
+  'Pink',
+  'Maroon',
+  'Black',
+  'White',
+];
+
+function ColorSwatch({color}) {
+  return (
+    <div
+      aria-hidden
+      className="rounded-full w-4 h-4 border border-black/50 bg-clip-padding"
+      style={{background: color}}
+    />
+  );
+}
+
+function SelectDemo() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [selectedIndex, setSelectedIndex] = useState(null);
+
+  const {x, y, strategy, refs, context} = useFloating({
+    placement: 'bottom-start',
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      size({
+        apply({rects, elements, availableHeight}) {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${Math.max(200, availableHeight)}px`,
+            width: `${rects.reference.width}px`,
+          });
+        },
+        padding: 50,
+      }),
+      flip({
+        padding: 50,
+        fallbackStrategy: 'initialPlacement',
+      }),
+    ],
+  });
+
+  const listRef = useRef([]);
+  const listContentRef = useRef(options);
+
+  const click = useClick(context, {event: 'mousedown'});
+  const dismiss = useDismiss(context);
+  const role = useRole(context, {role: 'listbox'});
+  const listNav = useListNavigation(context, {
+    listRef,
+    activeIndex,
+    selectedIndex,
+    onNavigate: setActiveIndex,
+    // This is a large list, allow looping.
+    loop: true,
+  });
+  const typeahead = useTypeahead(context, {
+    listRef: listContentRef,
+    activeIndex,
+    selectedIndex,
+    onMatch: isOpen ? setActiveIndex : setSelectedIndex,
+  });
+
+  const {getReferenceProps, getFloatingProps, getItemProps} =
+    useInteractions([click, dismiss, role, listNav, typeahead]);
+
+  const handleSelect = (index) => {
+    setSelectedIndex(index);
+    setIsOpen(false);
+  };
+
+  const selectedItemLabel =
+    selectedIndex !== null ? options[selectedIndex] : undefined;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label
+        className="flex flex-col items-center font-bold text-md"
+        id="select-label"
+      >
+        Select balloon color
+      </label>
+      <Button
+        ref={refs.setReference}
+        aria-labelledby={
+          selectedItemLabel ? undefined : 'select-label'
+        }
+        aria-label={`${selectedItemLabel} selected`}
+        aria-autocomplete="none"
+        data-open={isOpen ? '' : undefined}
+        className="flex items-center gap-2 bg-gray-100/75 rounded w-[10rem]"
+        {...getReferenceProps()}
+        // The default role for the reference using a "listbox"
+        // is a "combobox", but Safari has a bug with VoiceOver
+        // where it cuts off letters when announcing the button's
+        // content when it has that role.
+        // This overrides the one from the props above.
+        role={undefined}
+      >
+        <ColorSwatch
+          color={selectedItemLabel?.toLocaleLowerCase()}
+        />
+        {selectedItemLabel || 'Select...'}
+      </Button>
+      {isOpen && (
+        <FloatingFocusManager context={context} modal={false}>
+          <div
+            ref={refs.setFloating}
+            className="bg-white/80 dark:bg-gray-600/80 shadow-lg max-h-[20rem] overflow-y-auto rounded-lg border border-slate-900/5 bg-clip-padding outline-none p-1 backdrop-blur-lg"
+            style={{
+              position: strategy,
+              top: y ?? 0,
+              left: x ?? 0,
+            }}
+            {...getFloatingProps()}
+          >
+            {options.map((value, i) => (
+              <div
+                key={value}
+                ref={(node) => {
+                  listRef.current[i] = node;
+                }}
+                role="option"
+                tabIndex={i === activeIndex ? 0 : -1}
+                aria-selected={
+                  i === selectedIndex && i === activeIndex
+                }
+                className={classNames(
+                  'flex gap-2 items-center p-2 rounded outline-none cursor-default scroll-my-1',
+                  {
+                    'bg-cyan-200 dark:bg-blue-500 dark:text-white':
+                      i === activeIndex,
+                  }
+                )}
+                {...getItemProps({
+                  // Handle pointer select.
+                  onClick() {
+                    handleSelect(i);
+                  },
+                  // Handle keyboard select.
+                  onKeyDown(event) {
+                    if (event.key === 'Enter') {
+                      event.preventDefault();
+                      handleSelect(i);
+                    }
+
+                    // Only if not using typeahead.
+                    if (
+                      event.key === ' ' &&
+                      !context.dataRef.current.typing
+                    ) {
+                      event.preventDefault();
+                      handleSelect(i);
+                    }
+                  },
+                })}
+              >
+                <ColorSwatch color={options[i]?.toLowerCase()} />
+                {value}
+                <span aria-hidden className="absolute right-4">
+                  {i === selectedIndex ? (
+                    <Check width={20} height={20} />
+                  ) : (
+                    ''
+                  )}
+                </span>
+              </div>
+            ))}
+          </div>
+        </FloatingFocusManager>
+      )}
+    </div>
+  );
+}
+
+const fruits = [
+  'Alfalfa Sprouts',
+  'Apple',
+  'Apricot',
+  'Artichoke',
+  'Asian Pear',
+  'Asparagus',
+  'Atemoya',
+  'Avocado',
+  'Bamboo Shoots',
+  'Banana',
+  'Bean Sprouts',
+  'Beans',
+  'Beets',
+  'Belgian Endive',
+  'Bell Peppers',
+  'Bitter Melon',
+  'Blackberries',
+  'Blueberries',
+  'Bok Choy',
+  'Boniato',
+  'Boysenberries',
+  'Broccoflower',
+  'Broccoli',
+  'Brussels Sprouts',
+  'Cabbage',
+  'Cactus Pear',
+  'Cantaloupe',
+  'Carambola',
+  'Carrots',
+  'Casaba Melon',
+  'Cauliflower',
+  'Celery',
+  'Chayote',
+  'Cherimoya',
+  'Cherries',
+  'Coconuts',
+  'Collard Greens',
+  'Corn',
+  'Cranberries',
+  'Cucumber',
+  'Dates',
+  'Dried Plums',
+  'Eggplant',
+  'Endive',
+  'Escarole',
+  'Feijoa',
+  'Fennel',
+  'Figs',
+  'Garlic',
+  'Gooseberries',
+  'Grapefruit',
+  'Grapes',
+  'Green Beans',
+  'Green Onions',
+  'Greens',
+  'Guava',
+  'Hominy',
+  'Honeydew Melon',
+  'Horned Melon',
+  'Iceberg Lettuce',
+  'Jerusalem Artichoke',
+  'Jicama',
+  'Kale',
+  'Kiwifruit',
+  'Kohlrabi',
+  'Kumquat',
+  'Leeks',
+  'Lemons',
+  'Lettuce',
+  'Lima Beans',
+  'Limes',
+  'Longan',
+  'Loquat',
+  'Lychee',
+  'Madarins',
+  'Malanga',
+  'Mandarin Oranges',
+  'Mangos',
+  'Mulberries',
+  'Mushrooms',
+  'Napa',
+  'Nectarines',
+  'Okra',
+  'Onion',
+  'Oranges',
+  'Papayas',
+  'Parsnip',
+  'Passion Fruit',
+  'Peaches',
+  'Pears',
+  'Peas',
+  'Peppers',
+  'Persimmons',
+  'Pineapple',
+  'Plantains',
+  'Plums',
+  'Pomegranate',
+  'Potatoes',
+  'Prickly Pear',
+  'Prunes',
+  'Pummelo',
+  'Pumpkin',
+  'Quince',
+  'Radicchio',
+  'Radishes',
+  'Raisins',
+  'Raspberries',
+  'Red Cabbage',
+  'Rhubarb',
+  'Romaine Lettuce',
+  'Rutabaga',
+  'Shallots',
+  'Snow Peas',
+  'Spinach',
+  'Sprouts',
+  'Squash',
+  'Strawberries',
+  'String Beans',
+  'Sweet Potato',
+  'Tangelo',
+  'Tangerines',
+  'Tomatillo',
+  'Tomato',
+  'Turnip',
+  'Ugli Fruit',
+  'Water Chestnuts',
+  'Watercress',
+  'Watermelon',
+  'Waxed Beans',
+  'Yams',
+  'Yellow Squash',
+  'Yuca/Cassava',
+  'Zucchini Squash',
+];
+
+const Item = forwardRef(({children, active, ...rest}, ref) => {
+  const id = useId();
+  return (
+    <div
+      ref={ref}
+      className={classNames(
+        'p-2 cursor-default rounded-md scroll-my-1',
+        {
+          'bg-blue-500 text-white': active,
+        }
+      )}
+      role="option"
+      id={id}
+      aria-selected={active}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+
+function ComboboxDemo() {
+  const [open, setOpen] = useState(false);
+  const [inputValue, setInputValue] = useState('');
+  const [activeIndex, setActiveIndex] = useState(null);
+
+  const listRef = useRef([]);
+
+  const {x, y, strategy, context, refs} = useFloating({
+    whileElementsMounted: autoUpdate,
+    open,
+    onOpenChange: setOpen,
+    middleware: [
+      offset(5),
+      size({
+        apply({rects, elements, availableHeight}) {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${Math.max(200, availableHeight)}px`,
+            width: `${rects.reference.width}px`,
+          });
+        },
+        padding: 50,
+      }),
+      flip({
+        padding: 50,
+        fallbackStrategy: 'initialPlacement',
+      }),
+    ],
+  });
+
+  const {getReferenceProps, getFloatingProps, getItemProps} =
+    useInteractions([
+      useRole(context, {role: 'listbox'}),
+      useDismiss(context),
+      useListNavigation(context, {
+        listRef,
+        activeIndex,
+        onNavigate: setActiveIndex,
+        virtual: true,
+        loop: true,
+        allowEscape: true,
+      }),
+    ]);
+
+  function onChange(event) {
+    const value = event.target.value;
+    setInputValue(value);
+
+    if (value) {
+      setOpen(true);
+    } else {
+      setOpen(false);
+    }
+  }
+
+  const items = fruits.filter((item) =>
+    item.toLowerCase().startsWith(inputValue.toLowerCase())
+  );
+
+  return (
+    <>
+      <input
+        ref={refs.setReference}
+        value={inputValue}
+        className="border-2 p-2 rounded border-gray-300 dark:border-gray-500 focus:border-blue-500 outline-none dark:bg-gray-600"
+        placeholder="Enter balloon fruit"
+        aria-autocomplete="list"
+        aria-labelledby={
+          open && items.length === 0
+            ? 'combobox-no-results'
+            : undefined
+        }
+        {...getReferenceProps({
+          onChange,
+          onKeyDown(event) {
+            if (
+              event.key === 'Enter' &&
+              activeIndex != null &&
+              items[activeIndex]
+            ) {
+              setInputValue(items[activeIndex]);
+              setActiveIndex(null);
+              setOpen(false);
+            }
+          },
+        })}
+      />
+      {open && (
+        <FloatingFocusManager
+          context={context}
+          initialFocus={-1}
+          visuallyHiddenDismiss
+        >
+          <div
+            ref={refs.setFloating}
+            className="bg-white/80 dark:bg-gray-600/80 text-left shadow-lg max-h-[20rem] overflow-y-auto rounded-lg border border-slate-900/5 bg-clip-padding outline-none p-1 backdrop-blur-lg z-10"
+            {...getFloatingProps({
+              style: {
+                position: strategy,
+                left: x ?? 0,
+                top: y ?? 0,
+              },
+            })}
+          >
+            {items.length === 0 && (
+              <p
+                className="m-2"
+                id="combobox-no-results"
+                role="region"
+                aria-atomic="true"
+                aria-live="assertive"
+              >
+                No fruits found.
+              </p>
+            )}
+            {items.map((item, index) => (
+              <Item
+                {...getItemProps({
+                  key: item,
+                  ref(node) {
+                    listRef.current[index] = node;
+                  },
+                  onClick() {
+                    setInputValue(item);
+                    setOpen(false);
+                    refs.domReference.current?.focus();
+                  },
+                })}
+                active={activeIndex === index}
+              >
+                {item}
+              </Item>
+            ))}
+          </div>
+        </FloatingFocusManager>
+      )}
+    </>
+  );
+}
+
+export const MenuItem = forwardRef(
+  ({label, disabled, ...props}, ref) => {
+    return (
+      <button
+        type="button"
+        {...props}
+        className={classNames(
+          'cursor-default text-left flex py-2 px-3 focus:bg-blue-500 focus:text-white outline-none rounded',
+          {
+            'opacity-40': disabled,
+          }
+        )}
+        ref={ref}
+        role="menuitem"
+        disabled={disabled}
+      >
+        {label}
+      </button>
+    );
+  }
+);
+
+export const MenuComponent = forwardRef(
+  ({children, label, ...props}, forwardedRef) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(null);
+    const [allowHover, setAllowHover] = useState(false);
+    const [hasFocusInside, setHasFocusInside] = useState(false);
+
+    const listItemsRef = useRef([]);
+    const listContentRef = useRef([]);
+
+    useEffect(() => {
+      const strings = [];
+      Children.forEach(children, (child) => {
+        if (isValidElement(child)) {
+          strings.push(
+            child.props.label && !child.props.disabled
+              ? child.props.label
+              : null
+          );
+        }
+      });
+      listContentRef.current = strings;
+    });
+
+    const tree = useFloatingTree();
+    const nodeId = useFloatingNodeId();
+    const parentId = useFloatingParentNodeId();
+    const isNested = parentId != null;
+
+    const {x, y, strategy, refs, context} = useFloating({
+      nodeId,
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      placement: isNested ? 'right-start' : 'bottom-start',
+      middleware: [
+        offset({
+          mainAxis: isNested ? 0 : 4,
+          alignmentAxis: isNested ? -4 : 0,
+        }),
+        flip(),
+        shift(),
+      ],
+      whileElementsMounted: autoUpdate,
+    });
+
+    const hover = useHover(context, {
+      enabled: isNested && allowHover,
+      delay: {open: 75},
+      handleClose: safePolygon({
+        restMs: 25,
+        blockPointerEvents: true,
+      }),
+    });
+    const click = useClick(context, {
+      event: 'mousedown',
+      toggle: !isNested || !allowHover,
+      ignoreMouse: isNested,
+    });
+    const role = useRole(context, {role: 'menu'});
+    const dismiss = useDismiss(context, {bubbles: true});
+    const listNavigation = useListNavigation(context, {
+      listRef: listItemsRef,
+      activeIndex,
+      nested: isNested,
+      onNavigate: setActiveIndex,
+    });
+    const typeahead = useTypeahead(context, {
+      listRef: listContentRef,
+      onMatch: isOpen ? setActiveIndex : undefined,
+      activeIndex,
+    });
+
+    const {getReferenceProps, getFloatingProps, getItemProps} =
+      useInteractions([
+        hover,
+        click,
+        role,
+        dismiss,
+        listNavigation,
+        typeahead,
+      ]);
+
+    // Event emitter allows you to communicate across tree components.
+    // This effect closes all menus when an item gets clicked anywhere
+    // in the tree.
+    useEffect(() => {
+      if (!tree) return;
+
+      function handleTreeClick() {
+        setIsOpen(false);
+      }
+
+      function onSubMenuOpen(event) {
+        if (
+          event.nodeId !== nodeId &&
+          event.parentId === parentId
+        ) {
+          setIsOpen(false);
+        }
+      }
+
+      tree.events.on('click', handleTreeClick);
+      tree.events.on('menuopen', onSubMenuOpen);
+
+      return () => {
+        tree.events.off('click', handleTreeClick);
+        tree.events.off('menuopen', onSubMenuOpen);
+      };
+    }, [tree, nodeId, parentId]);
+
+    useEffect(() => {
+      if (isOpen && tree) {
+        tree.events.emit('menuopen', {parentId, nodeId});
+      }
+    }, [tree, isOpen, nodeId, parentId]);
+
+    // Determine if "hover" logic can run based on the modality of input. This
+    // prevents unwanted focus synchronization as menus open and close with
+    // keyboard navigation and the cursor is resting on the menu.
+    useEffect(() => {
+      function onPointerMove({pointerType}) {
+        if (pointerType !== 'touch') {
+          setAllowHover(true);
+        }
+      }
+
+      function onKeyDown() {
+        setAllowHover(false);
+      }
+
+      window.addEventListener('pointermove', onPointerMove, {
+        once: true,
+        capture: true,
+      });
+      window.addEventListener('keydown', onKeyDown, true);
+      return () => {
+        window.removeEventListener(
+          'pointermove',
+          onPointerMove,
+          {
+            capture: true,
+          }
+        );
+        window.removeEventListener('keydown', onKeyDown, true);
+      };
+    }, [allowHover]);
+
+    const {isMounted, styles} = useTransitionStyles(context, {
+      duration: 100,
+    });
+
+    const referenceRef = useMergeRefs([
+      refs.setReference,
+      forwardedRef,
+    ]);
+    const referenceProps = getReferenceProps({
+      ...props,
+      onFocus(event) {
+        props.onFocus?.(event);
+        setHasFocusInside(false);
+      },
+      onClick(event) {
+        event.stopPropagation();
+      },
+      ...(isNested && {
+        // Indicates this is a nested <Menu /> acting as a <MenuItem />.
+        role: 'menuitem',
+      }),
+    });
+
+    return (
+      <FloatingNode id={nodeId}>
+        <button
+          ref={referenceRef}
+          data-open={isOpen ? '' : undefined}
+          {...referenceProps}
+          className={classNames(
+            'cursor-default text-left flex gap-4 justify-between items-center rounded py-2 px-3',
+            {
+              'transition-colors hover:bg-gray-100/50 dark:hover:bg-gray-600 data-[open]:bg-gray-100/50 dark:data-[open]:bg-gray-600':
+                !isNested,
+              'focus:bg-blue-500 focus:text-white outline-none':
+                isNested,
+              'bg-blue-500 text-white':
+                isOpen && isNested && !hasFocusInside,
+              'bg-gray-500/20 dark:bg-gray-700 rounded py-1 px-2':
+                isNested && isOpen && hasFocusInside,
+            }
+          )}
+        >
+          {label}{' '}
+          {isNested && (
+            <span aria-hidden className="ml-4">
+              <ChevronRight size={16} />
+            </span>
+          )}
+        </button>
+        <FloatingPortal>
+          {isMounted && (
+            <FloatingFocusManager
+              context={context}
+              // Prevent outside content interference.
+              modal={false}
+              // Only initially focus the root floating menu.
+              initialFocus={isNested ? -1 : 0}
+              // Only return focus to the root menu's reference when menus close.
+              returnFocus={!isNested}
+            >
+              <div
+                ref={refs.setFloating}
+                className="flex flex-col rounded bg-white/80 dark:bg-gray-600/80 backdrop-blur-lg shadow-lg outline-none p-1 border border-slate-900/10 bg-clip-padding"
+                style={{
+                  position: strategy,
+                  top: y ?? 0,
+                  left: x ?? 0,
+                  width: 'max-content',
+                  ...styles,
+                }}
+                {...getFloatingProps()}
+              >
+                {Children.map(
+                  children,
+                  (child, index) =>
+                    isValidElement(child) &&
+                    cloneElement(
+                      child,
+                      getItemProps({
+                        tabIndex: activeIndex === index ? 0 : -1,
+                        ref(node) {
+                          listItemsRef.current[index] = node;
+                        },
+                        onClick(event) {
+                          child.props.onClick?.(event);
+                          tree?.events.emit('click');
+                        },
+                        onFocus(event) {
+                          child.props.onFocus?.(event);
+                          setHasFocusInside(true);
+                        },
+                        // Allow focus synchronization if the cursor did not move.
+                        onMouseEnter() {
+                          if (allowHover && isOpen) {
+                            setActiveIndex(index);
+                          }
+                        },
+                      })
+                    )
+                )}
+              </div>
+            </FloatingFocusManager>
+          )}
+        </FloatingPortal>
+      </FloatingNode>
+    );
+  }
+);
+
+export const Menu = forwardRef((props, ref) => {
+  const parentId = useFloatingParentNodeId();
+
+  if (parentId === null) {
+    return (
+      <FloatingTree>
+        <MenuComponent {...props} ref={ref} />
+      </FloatingTree>
+    );
+  }
+
+  return <MenuComponent {...props} ref={ref} />;
+});
+
 function HomePage() {
   const bannerRef = useRef();
   const [hideBanner, setHideBanner] = useState(true);
@@ -582,20 +1460,19 @@ function HomePage() {
               <GitHub /> GitHub
             </a>
           </div>
-        </div>
-      </header>
-      <main className="relative">
-        <div className="container mx-auto px-4 md:px-8 max-w-screen-xl">
-          <p className="prose dark:prose-invert text-xl lg:text-2xl text-left lg:leading-relaxed dark:-mt-4">
-            A JavaScript library for{' '}
-            <strong>anchor positioning</strong> — anchor a{' '}
+          <p className="relative z-1 mx-auto text-center mt-16 text-gray-100 prose dark:prose-invert text-xl lg:text-2xl lg:leading-relaxed px-4">
+            A JavaScript library to{' '}
+            <strong className="text-white">position</strong> and
+            create{' '}
+            <strong className="text-white">interactions</strong>{' '}
+            for{' '}
             <Tooltip>
               <TooltipTrigger asChild>
                 <span
                   tabIndex={0}
                   // VoiceOver
                   role="button"
-                  className="relative text-gray-1000 decoration-gray-1000 dark:text-gray-150 dark:decoration-gray-150"
+                  className="relative decoration-gray-150 text-gray-100"
                   style={{
                     textDecorationLine: 'underline',
                     textDecorationStyle: 'wavy',
@@ -603,7 +1480,7 @@ function HomePage() {
                     textDecorationThickness: 1,
                   }}
                 >
-                  floating element
+                  floating elements
                 </span>
               </TooltipTrigger>
               <TooltipContent>
@@ -613,14 +1490,22 @@ function HomePage() {
                   flow of content, like this one!
                 </div>
               </TooltipContent>
-            </Tooltip>{' '}
-            next to another element while making sure it stays in
-            view optimally. This lets you position tooltips,
-            popovers, or dropdowns to efficiently float on top of
-            the UI!
+            </Tooltip>
+          </p>
+        </div>
+      </header>
+      <main className="relative">
+        <div className="container mx-auto px-4 md:px-8 max-w-screen-xl">
+          <h2 className="inline-block text-transparent leading-gradient-heading bg-clip-text bg-gradient-to-r from-rose-500 dark:from-rose-400 to-pink-500 dark:to-pink-400 text-3xl lg:text-4xl font-bold my-4 dark:-mt-4">
+            Advanced anchor positioning.
+          </h2>
+          <p className="prose dark:prose-invert text-xl lg:text-2xl text-left lg:leading-relaxed">
+            Anchor a floating element next to another element
+            while making sure it stays in view by{' '}
+            <strong>avoiding collisions</strong>. This lets you
+            position tooltips, popovers, or dropdowns optimally.
           </p>
         </div>
-
         <div className="grid lg:grid-cols-2 gap-4 container md:px-4 py-8 mx-auto max-w-screen-xl">
           <Placement />
           <Shift />
@@ -630,9 +1515,209 @@ function HomePage() {
           <Virtual />
         </div>
 
+        <div className="container mx-auto px-4 md:px-8 max-w-screen-xl">
+          <h2 className="inline-block text-transparent leading-gradient-heading bg-clip-text bg-gradient-to-r from-cyan-500 dark:from-cyan-400 to-pink-400 dark:to-pink-400 text-3xl lg:text-4xl font-bold mt-16 mb-4">
+            Interactions for React.
+          </h2>
+          <p className="prose dark:prose-invert text-xl lg:text-2xl text-left lg:leading-relaxed">
+            Build your own floating UI components with React.
+            From simple tooltips to select menus, you have full
+            control while ensuring{' '}
+            <strong>fully accessible</strong> UI experiences.
+          </p>
+        </div>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 container md:px-4 py-8 mx-auto max-w-screen-xl mb-12 dark:text-black">
+          <div className="bg-white dark:bg-gray-700 dark:text-gray-100 p-10 sm:rounded-lg shadow text-center flex flex-col justify-between h-[18rem]">
+            <FloatingDelayGroup
+              delay={{open: 1000, close: 150}}
+              timeoutMs={200}
+            >
+              <div>
+                <h3 className="text-3xl font-bold mb-6">
+                  Tooltips
+                </h3>
+                <p>
+                  Floating elements that display information
+                  related to an anchor element on hover or focus.
+                </p>
+              </div>
+              <div className="flex justify-center gap-1">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button className="p-3 hover:text-red-500 dark:hover:text-red-300 rounded-full">
+                      <Heart size={26} />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Like</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button className="p-3 hover:text-blue-500 dark:hover:text-blue-300 rounded-full">
+                      <Share size={26} />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Share</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button className="p-3 hover:text-orange-500 dark:hover:text-orange-300 rounded-full">
+                      <BarChart size={26} />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Stats</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button className="p-3 hover:text-green-500 dark:hover:text-green-300 rounded-full">
+                      <Edit size={26} />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Edit</TooltipContent>
+                </Tooltip>
+              </div>
+            </FloatingDelayGroup>
+          </div>
+
+          <div className="bg-white dark:bg-gray-700 dark:text-gray-100 p-10 sm:rounded-lg shadow text-center flex flex-col justify-between h-[18rem]">
+            <FloatingDelayGroup delay={{open: 1000, close: 100}}>
+              <div>
+                <h3 className="text-3xl font-bold mb-6">
+                  Popovers
+                </h3>
+                <p>
+                  Floating elements that display an anchored
+                  interactive dialog on click.
+                </p>
+              </div>
+              <div className="flex justify-center gap-1">
+                <PopoverDemo />
+              </div>
+            </FloatingDelayGroup>
+          </div>
+
+          <div className="bg-white dark:bg-gray-700 dark:text-gray-100 p-10 sm:rounded-lg shadow text-center flex flex-col justify-between h-[18rem]">
+            <FloatingDelayGroup delay={{open: 1000, close: 100}}>
+              <div>
+                <h3 className="text-3xl font-bold mb-6">
+                  Select Menus
+                </h3>
+                <p>
+                  Floating elements that display a list of
+                  options to choose from on click.
+                </p>
+              </div>
+              <div className="flex justify-center gap-1">
+                <SelectDemo />
+              </div>
+            </FloatingDelayGroup>
+          </div>
+
+          <div className="bg-white dark:bg-gray-700 dark:text-gray-100 p-10 sm:rounded-lg shadow text-center flex flex-col justify-between h-[18rem]">
+            <FloatingDelayGroup delay={{open: 1000, close: 100}}>
+              <div>
+                <h3 className="text-3xl font-bold mb-6">
+                  Comboboxes
+                </h3>
+                <p>
+                  Floating elements that combine an input and a
+                  list of searchable options to choose from.
+                </p>
+              </div>
+              <div className="flex justify-center gap-1">
+                <ComboboxDemo />
+              </div>
+            </FloatingDelayGroup>
+          </div>
+
+          <div className="bg-white dark:bg-gray-700 dark:text-gray-100 p-10 sm:rounded-lg shadow text-center flex flex-col justify-between h-[18rem]">
+            <FloatingDelayGroup delay={{open: 1000, close: 100}}>
+              <div>
+                <h3 className="text-3xl font-bold mb-6">
+                  Dropdown Menus
+                </h3>
+                <p>
+                  Floating elements that display a list of
+                  buttons that perform an action.
+                </p>
+              </div>
+              <div className="flex justify-center gap-1">
+                <Menu label="Edit balloon">
+                  <MenuItem label="Undo" />
+                  <MenuItem label="Redo" />
+                  <MenuItem label="Copy" disabled />
+                  <Menu label="Text transform">
+                    <MenuItem label="UPPERCASE" />
+                    <MenuItem label="lowercase" />
+                    <MenuItem label="camelCase" />
+                    <MenuItem label="PascalCase" />
+                    <MenuItem label="snake_case" />
+                    <MenuItem label="kebab-case" />
+                  </Menu>
+                  <Menu label="Find">
+                    <MenuItem label="Find" />
+                    <MenuItem label="Find Next" />
+                    <MenuItem label="Find Previous" />
+                  </Menu>
+                </Menu>
+              </div>
+            </FloatingDelayGroup>
+          </div>
+
+          <div className="bg-white dark:bg-gray-700 dark:text-gray-100 p-10 sm:rounded-lg shadow text-center flex flex-col justify-between h-[18rem]">
+            <FloatingDelayGroup delay={{open: 1000, close: 100}}>
+              <div>
+                <h3 className="text-3xl font-bold mb-6">
+                  Dialogs
+                </h3>
+                <p>
+                  A floating modal window overlaid on the UI,
+                  rendering the content underneath inert.
+                </p>
+              </div>
+              <div className="flex justify-center gap-1">
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <Button>Delete balloon</Button>
+                  </DialogTrigger>
+                  <DialogContent className="bg-white p-6 rounded-lg">
+                    <DialogHeading className="text-2xl font-bold mb-2">
+                      Delete balloon
+                    </DialogHeading>
+                    <DialogDescription>
+                      Are you sure you want to delete?
+                    </DialogDescription>
+                    <div className="flex gap-2 mt-4">
+                      <DialogClose className="cursor-default transition-colors w-full rounded-lg bg-red-500 hover:bg-red-600 text-white p-2">
+                        Confirm
+                      </DialogClose>
+                      <DialogClose className="cursor-default transition-colors w-full rounded-lg bg-gray-300 hover:bg-slate-200 p-2">
+                        Cancel
+                      </DialogClose>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+              </div>
+            </FloatingDelayGroup>
+          </div>
+        </div>
+
+        <div className="container text-center mx-auto px-4 md:px-8 max-w-screen-xl mb-24">
+          <Link
+            href="/docs/react"
+            className="inline-block transition-colors bg-rose-500 dark:bg-rose-600 hover:bg-pink-500 text-gray-50 p-6 rounded-md font-bold sm:text-xl"
+          >
+            Use Floating UI with React{' '}
+            <ArrowRight
+              className="inline-block relative top-[-1px]"
+              size={20}
+            />
+          </Link>
+        </div>
+
         <div className="container mx-auto px-4 md:px-8 max-w-screen-xl relative">
-          <h2 className="inline-block text-transparent leading-gradient-heading bg-clip-text bg-gradient-to-r from-blue-500 to-teal-400 text-3xl lg:text-4xl font-bold mt-8 mb-4">
-            Light as a feather.
+          <h2 className="inline-block text-transparent leading-gradient-heading bg-clip-text bg-gradient-to-r from-blue-500 to-teal-500 dark:from-blue-500 dark:to-teal-400 text-3xl lg:text-4xl font-bold mt-16 mb-4">
+            Modern, tree-shakeable modules.
           </h2>
           <p className="prose dark:prose-invert text-xl lg:text-2xl text-left mb-8 lg:leading-relaxed">
             This positioning toolkit has a platform-agnostic 0.6
@@ -704,31 +1789,6 @@ function HomePage() {
           </div>
         </div>
 
-        <div className="container mx-auto px-4 md:px-8 max-w-screen-xl relative mb-24">
-          <h2 className="inline-block text-transparent leading-gradient-heading bg-clip-text bg-gradient-to-r from-rose-500 dark:from-rose-400 to-pink-500 dark:to-pink-400 text-3xl lg:text-4xl font-bold mt-8 mb-4">
-            Interactions for React.
-          </h2>
-          <p className="prose dark:prose-invert text-xl lg:text-2xl text-left mb-12 lg:leading-relaxed">
-            In addition to positioning, there are also
-            interaction primitives to build floating UI
-            components with React. This includes event hooks for
-            hover, focus or click, modal and non-modal focus
-            management, keyboard list navigation, typeahead,
-            portals, backdrop overlays, screen reader support,
-            and more.
-          </p>
-          <Link
-            href="/docs/react"
-            className="transition-colors bg-rose-500 dark:bg-rose-600 hover:bg-pink-500 text-gray-50 p-4 rounded-md font-bold text-md"
-          >
-            Use Floating UI with React{' '}
-            <ArrowRight
-              className="inline-block relative top-[-1px]"
-              size={20}
-            />
-          </Link>
-        </div>
-
         <div className="container px-4 md:px-8 mx-auto max-w-screen-xl">
           <h2 className="inline-block text-3xl lg:text-4xl dark:text-gray-50 font-bold mt-8 mb-4">
             Support Floating UI!