diff --git a/docs/src/styles/components/menu/rootprovider.css b/docs/src/styles/components/menu/rootprovider.css
index e69de29..74c1cd9 100644
--- a/docs/src/styles/components/menu/rootprovider.css
+++ b/docs/src/styles/components/menu/rootprovider.css
@@ -0,0 +1,61 @@
+.menu-rootprovider [data-part="trigger"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.25rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--demo-coral-contrast);
+  background: var(--demo-coral-solid);
+  border: 1px solid var(--demo-coral-solid);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+
+.menu-rootprovider [data-part="trigger"]:hover {
+  background: var(--demo-coral-emphasized);
+  border-color: var(--demo-coral-emphasized);
+}
+
+.menu-rootprovider [data-part="trigger"]:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--demo-coral-focus-ring);
+}
+
+.menu-rootprovider [data-part="content"] {
+  min-width: 12rem;
+  padding: 0.375rem;
+  background: var(--demo-bg-popover);
+  border: 1px solid var(--demo-border);
+  border-radius: 0.5rem;
+  box-shadow: var(--demo-shadow-lg);
+}
+
+.menu-rootprovider [data-part="item"] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--demo-neutral-fg);
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.menu-rootprovider [data-part="item"][data-highlighted] {
+  background: var(--demo-neutral-subtle);
+}
+
+.menu-rootprovider [data-part="item"][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.menu-rootprovider > button {
+  margin-bottom: 0.75rem;
+}
diff --git a/packages/react/src/components/menu/examples/RootProvider.tsx b/packages/react/src/components/menu/examples/RootProvider.tsx
new file mode 100644
index 0000000..ff5ba8f
--- /dev/null
+++ b/packages/react/src/components/menu/examples/RootProvider.tsx
@@ -0,0 +1,25 @@
+import { Menu, useMenu } from '../index'
+
+export function RootProvider() {
+  const menu = useMenu()
+
+  return (
+    <>
+      <button onClick={() => menu.api.setHighlightedValue('solid')}>Highlight Solid</button>
+
+      <Menu.RootProvider value={menu}>
+        <Menu.Trigger>
+          Open menu
+          <Menu.Indicator>➡️</Menu.Indicator>
+        </Menu.Trigger>
+        <Menu.Positioner>
+          <Menu.Content>
+            <Menu.Item value="react">React</Menu.Item>
+            <Menu.Item value="solid">Solid</Menu.Item>
+            <Menu.Item value="vue">Vue</Menu.Item>
+          </Menu.Content>
+        </Menu.Positioner>
+      </Menu.RootProvider>
+    </>
+  )
+}
diff --git a/packages/react/src/components/menu/stories/menu.stories.tsx b/packages/react/src/components/menu/stories/menu.stories.tsx
index 90f2085..8915095 100644
--- a/packages/react/src/components/menu/stories/menu.stories.tsx
+++ b/packages/react/src/components/menu/stories/menu.stories.tsx
@@ -15,4 +15,5 @@ export { Group } from '../examples/Group'
 export { Nested } from '../examples/Nested'
 export { RadioGroup } from '../examples/RadioGroup'
 export { RenderProp } from '../examples/RenderProp'
+export { RootProvider } from '../examples/RootProvider'
 export { Separator } from '../examples/Separator'