Add Base UI Context Menu component wrapper

.pre-commit-config.yaml

@@ -2,7 +2,7 @@ fail_fast: true
 
 repos:
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.12.2
+    rev: v0.12.3
     hooks:
       - id: ruff-check
         files: ^reflex_ui/

demo/demo/demo.py

@@ -3,6 +3,7 @@
 import reflex as rx
 
 import reflex_ui as ui
+from reflex_ui.components.base.context_menu import context_menu
 
 
 class State(rx.State):
@@ -58,6 +59,31 @@ def index() -> rx.Component:
             on_value_change=lambda value: rx.toast.success(f"Value: {value}"),
             on_open_change=lambda value: rx.toast.success(f"Open: {value}"),
         ),
+        context_menu.root(
+            context_menu.trigger(
+                rx.el.div(
+                    "Right-click me for context menu!",
+                    class_name="p-4 border-2 border-dashed border-gray-400 rounded-lg text-center bg-gray-50 hover:bg-gray-100 cursor-context-menu",
+                )
+            ),
+            context_menu.portal(
+                context_menu.positioner(
+                    context_menu.popup(
+                        context_menu.item("Copy"),
+                        context_menu.item("Cut"),
+                        context_menu.item("Paste"),
+                        context_menu.separator(),
+                        context_menu.group(
+                            context_menu.group_label("Actions"),
+                            context_menu.item("Delete"),
+                            context_menu.item("Rename"),
+                        ),
+                        context_menu.separator(),
+                        context_menu.item("Properties")
+                    )
+                )
+            )
+        ),
         ui.theme_switcher(class_name="absolute top-4 right-4"),
         class_name=ui.cn(
             "flex flex-col gap-6 items-center justify-center h-screen", "bg-secondary-1"

pyproject.toml

@@ -4,7 +4,7 @@ version = "0.0.1"
 description = "A set of reusable components built on top of Base UI and Tailwind, designed for use across any Reflex project"
 readme = "README.md"
 requires-python = ">=3.13"
-dependencies = ["reflex>=0.8.1"]
+dependencies = ["reflex>=0.8.2"]
 
 [build-system]
 requires = ["hatchling", "uv-dynamic-versioning"]

reflex_ui/__init__.py

@@ -13,6 +13,7 @@
     "components.base.input": ["input"],
     "components.base.link": ["link"],
     "components.base.menu": ["menu"],
+    "components.base.navigation_menu": ["navigation_menu"],
     "components.base.popover": ["popover"],
     "components.base.scroll_area": ["scroll_area"],
     "components.base.select": ["select"],

reflex_ui/__init__.pyi

@@ -15,6 +15,7 @@ from .components.base.gradient_profile import gradient_profile
 from .components.base.input import input
 from .components.base.link import link
 from .components.base.menu import menu
+from .components.base.navigation_menu import navigation_menu
 from .components.base.popover import popover
 from .components.base.scroll_area import scroll_area
 from .components.base.select import select
@@ -41,6 +42,7 @@ _REFLEX_UI_MAPPING = {
     "components.base.input": ["input"],
     "components.base.link": ["link"],
     "components.base.menu": ["menu"],
+    "components.base.navigation_menu": ["navigation_menu"],
     "components.base.popover": ["popover"],
     "components.base.scroll_area": ["scroll_area"],
     "components.base.select": ["select"],
@@ -78,6 +80,7 @@ __all__ = [
     "input",
     "link",
     "menu",
+    "navigation_menu",
     "popover",
     "scroll_area",
     "select",

reflex_ui/components/base/__init__.pyi

@@ -15,6 +15,7 @@ from .gradient_profile import gradient_profile
 from .input import input
 from .link import link
 from .menu import menu
+from .navigation_menu import navigation_menu
 from .popover import popover
 from .scroll_area import scroll_area
 from .select import select
@@ -43,6 +44,7 @@ __all__ = [
     "input",
     "link",
     "menu",
+    "navigation_menu",
     "popover",
     "scroll_area",
     "select",