diff --git a/docs/content/docs/components/contextmenu.md b/docs/content/docs/components/contextmenu.md
new file mode 100644
index 000000000..d520e46db
--- /dev/null
+++ b/docs/content/docs/components/contextmenu.md
@@ -0,0 +1,22 @@
+# ContextMenu
+
+A floating menu that appears upon right-click or long-press, providing a set of
+actions related to the clicked element.
+
+## Basic
+
+<ComponentPreview name='ContextMenu-Basic' />
+
+## Groups
+
+<ComponentPreview name='ContextMenu-Groups' />
+
+## Submenus
+
+<ComponentPreview name='ContextMenu-Submenus' />
+
+## Themes
+
+<ComponentPreview name='ContextMenu-Themes' />
+
+<!-- @include: ../../../meta/ContextMenu.md -->
diff --git a/src/components/ContextMenu/ContextMenu.story.vue b/src/components/ContextMenu/ContextMenu.story.vue
new file mode 100644
index 000000000..76478fcca
--- /dev/null
+++ b/src/components/ContextMenu/ContextMenu.story.vue
@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import ContextMenu from './ContextMenu.vue'
+
+const state = reactive({
+  disabled: false,
+  isUserLoggedIn: true,
+  hasEditPermission: true,
+  canDelete: false,
+})
+
+const contextMenuItems = [
+  // File Operations Group
+  {
+    group: 'File Operations',
+    items: [
+      {
+        label: 'Open',
+        icon: 'folder-open',
+        onClick: () => alert('Open clicked')
+      },
+      {
+        label: 'Open in New Window with Very Long Label Text',
+        icon: 'external-link',
+        shortcut: '⌘⇧O',
+        showTooltip: true, // Force tooltip for this item
+        disabled: !state.hasEditPermission,
+        onClick: () => alert('Open in New Window')
+      },
+      { separator: true },
+      {
+        label: 'Save',
+        icon: 'save',
+        shortcut: '⌘S',
+        onClick: () => alert('Save clicked')
+      },
+      {
+        label: 'Save As...',
+        icon: 'file-plus',
+        shortcut: '⌘⇧S',
+        onClick: () => alert('Save As clicked')
+      },
+      {
+        label: 'Save to Cloud Storage with Auto-Sync',
+        icon: 'cloud',
+        hidden: !state.isUserLoggedIn,
+        onClick: () => alert('Save to Cloud')
+      }
+    ]
+  },
+  // Edit Group
+  {
+    group: 'Edit',
+    items: [
+      {
+        label: 'Cut',
+        icon: 'scissors',
+        shortcut: '⌘X',
+        hidden: !state.hasEditPermission,
+        onClick: () => alert('Cut clicked')
+      },
+      {
+        label: 'Copy',
+        icon: 'copy',
+        shortcut: '⌘C',
+        onClick: () => alert('Copy clicked')
+      },
+      {
+        label: 'Paste',
+        icon: 'clipboard',
+        shortcut: '⌘V',
+        onClick: () => alert('Paste clicked')
+      },
+      { separator: true },
+      {
+        label: 'Find',
+        icon: 'search',
+        shortcut: '⌘F',
+        onClick: () => alert('Find clicked')
+      }
+    ]
+  },
+  // Share Group with Nested Submenus
+  {
+    group: 'Share',
+    items: [
+      {
+        label: 'Share',
+        icon: 'share-2',
+        submenu: [
+          {
+            label: 'Email',
+            icon: 'mail',
+            onClick: () => alert('Share via Email')
+          },
+          {
+            label: 'Copy Link',
+            icon: 'link',
+            shortcut: '⌘⇧C',
+            onClick: () => alert('Link copied')
+          },
+          { separator: true },
+          {
+            label: 'Social Media',
+            icon: 'share',
+            submenu: [
+              {
+                label: 'Twitter',
+                icon: 'twitter',
+                onClick: () => alert('Share on Twitter')
+              },
+              {
+                label: 'Facebook',
+                icon: 'facebook',
+                onClick: () => alert('Share on Facebook')
+              },
+              {
+                label: 'LinkedIn',
+                icon: 'linkedin',
+                onClick: () => alert('Share on LinkedIn')
+              }
+            ]
+          }
+        ]
+      },
+      {
+        label: 'Export',
+        icon: 'download',
+        shortcut: '⌘E',
+        onClick: () => alert('Export clicked')
+      }
+    ]
+  },
+  // Danger Zone
+  {
+    group: 'Danger Zone',
+    items: [
+      {
+        label: 'Archive',
+        icon: 'archive',
+        onClick: () => alert('Archive clicked')
+      },
+      { separator: true },
+      {
+        label: 'Delete',
+        icon: 'trash-2',
+        theme: 'red',
+        shortcut: '⌘⌫',
+        disabled: !state.canDelete,
+        onClick: () => alert('Delete clicked')
+      }
+    ]
+  },
+  // Theme Examples
+  {
+    group: 'Theme Examples',
+    items: [
+      {
+        label: 'Blue Theme Item',
+        icon: 'info',
+        theme: 'blue',
+        onClick: () => alert('Blue theme')
+      },
+      {
+        label: 'Green Theme Item',
+        icon: 'check-circle',
+        theme: 'green',
+        onClick: () => alert('Green theme')
+      },
+      {
+        label: 'Red Theme Item',
+        icon: 'alert-circle',
+        theme: 'red',
+        onClick: () => alert('Red theme')
+      }
+    ]
+  }
+]
+</script>
+
+<template>
+  <Story title="ContextMenu" :layout="{ type: 'grid', width: '100%' }">
+    <div class="p-8">
+      <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
+        <h3 class="font-semibold text-blue-900 mb-3">Interactive Controls</h3>
+        <div class="space-y-2 text-sm">
+          <div class="flex items-center gap-3">
+            <input type="checkbox" v-model="state.isUserLoggedIn" class="form-checkbox" />
+            <span>User Logged In (shows "Save to Cloud")</span>
+          </div>
+          <div class="flex items-center gap-3">
+            <input type="checkbox" v-model="state.hasEditPermission" class="form-checkbox" />
+            <span>Has Edit Permission (enables "Open in New Window", shows "Cut")</span>
+          </div>
+          <div class="flex items-center gap-3">
+            <input type="checkbox" v-model="state.canDelete" class="form-checkbox" />
+            <span>Can Delete (enables "Delete" button)</span>
+          </div>
+        </div>
+      </div>
+
+      <ContextMenu :items="contextMenuItems" :disabled="state.disabled">
+        <div class="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center hover:border-gray-400 transition-colors cursor-context-menu active:bg-gray-50">
+          <p class="text-gray-600 font-medium">
+            <span class="hidden sm:inline">Right-click here</span>
+            <span class="sm:hidden">Long-press here</span>
+          </p>
+          <p class="text-sm text-gray-500 mt-1">
+            <span class="hidden sm:inline">Try the context menu with groups, submenus, themes, and conditional items</span>
+            <span class="sm:hidden">Touch-optimized menu</span>
+          </p>
+        </div>
+      </ContextMenu>
+
+      <div class="mt-6 text-sm text-gray-600">
+        <h4 class="font-semibold mb-2">Features Demonstrated:</h4>
+        <ul class="list-disc list-inside space-y-1">
+          <li>Group labels and separators</li>
+          <li>Nested submenus (3 levels deep - see Social Media)</li>
+          <li>Keyboard shortcuts display (hidden on mobile)</li>
+          <li>Text truncation with tooltips for long labels</li>
+          <li>Conditional visibility (hidden property)</li>
+          <li>Disabled states</li>
+          <li>Multiple themes (gray, red, green, blue)</li>
+          <li>Icons and labels</li>
+          <li>Fixed-width responsive design (192px → 224px → 240px)</li>
+          <li>Collision detection prevents viewport overflow</li>
+          <li>Mobile-optimized touch targets (40px height)</li>
+          <li>Long-press support for mobile devices</li>
+        </ul>
+      </div>
+    </div>
+
+    <template #controls>
+      <HstCheckbox v-model="state.disabled" title="Disabled" />
+    </template>
+  </Story>
+</template>
diff --git a/src/components/ContextMenu/ContextMenu.vue b/src/components/ContextMenu/ContextMenu.vue
new file mode 100644
index 000000000..53b5a2dad
--- /dev/null
+++ b/src/components/ContextMenu/ContextMenu.vue
@@ -0,0 +1,480 @@
+<template>
+  <ContextMenuRoot>
+    <ContextMenuTrigger as-child :disabled="disabled">
+      <slot />
+    </ContextMenuTrigger>
+
+    <ContextMenuPortal>
+      <ContextMenuContent 
+        :class="cssClasses.contextMenuContent"
+        collision-boundary="viewport"
+        :collision-padding="16"
+        :avoid-collisions="true"
+      >
+        <template v-for="group in groups" :key="group.key">
+          <div v-if="group.items.length" :class="cssClasses.groupContainer">
+            <ContextMenuLabel
+              v-if="group.group && !group.hideLabel"
+              :class="[cssClasses.groupLabel, getTextColor(group)]"
+            >
+              {{ group.group }}
+            </ContextMenuLabel>
+
+            <template v-for="(item, index) in group.items" :key="item.label">
+              <!-- Separator -->
+              <ContextMenuSeparator
+                v-if="item.separator"
+                :class="cssClasses.separator"
+              />
+
+              <!-- Submenu Item -->
+              <ContextMenuSub v-else-if="item.submenu">
+                <ContextMenuSubTrigger as-child>
+                  <button
+                    :class="[
+                      cssClasses.submenuTrigger,
+                      getSubmenuBackgroundColor(item),
+                    ]"
+                  >
+                    <FeatherIcon
+                      v-if="item.icon && typeof item.icon === 'string'"
+                      :name="item.icon"
+                      :class="[cssClasses.itemIcon, getIconColor(item)]"
+                      aria-hidden="true"
+                    />
+                    <component
+                      :class="[cssClasses.itemIcon, getIconColor(item)]"
+                      v-else-if="item.icon"
+                      :is="item.icon"
+                    />
+                    <div
+                      v-else-if="groupHasIcons(group)"
+                      :class="cssClasses.itemIconPlaceholder"
+                    />
+                    <Tooltip v-if="shouldShowTooltip(item)" :text="item.label" placement="right">
+                      <span :class="[cssClasses.itemLabel, getTextColor(item)]">
+                        {{ item.label }}
+                      </span>
+                    </Tooltip>
+                    <span v-else :class="[cssClasses.itemLabel, getTextColor(item)]">
+                      {{ item.label }}
+                    </span>
+                    <FeatherIcon
+                      name="chevron-right"
+                      :class="[cssClasses.chevronIcon, getIconColor(item)]"
+                      aria-hidden="true"
+                    />
+                  </button>
+                </ContextMenuSubTrigger>
+                <ContextMenuPortal>
+                  <ContextMenuSubContent
+                    :class="cssClasses.contextMenuContent"
+                    :side-offset="4"
+                  >
+                    <div
+                      v-for="submenuGroup in getSubmenuGroups(item.submenu)"
+                      :key="submenuGroup.key"
+                      :class="cssClasses.groupContainer"
+                    >
+                      <ContextMenuLabel
+                        v-if="submenuGroup.group && !submenuGroup.hideLabel"
+                        :class="cssClasses.groupLabel"
+                      >
+                        {{ submenuGroup.group }}
+                      </ContextMenuLabel>
+                      <template
+                        v-for="subItem in submenuGroup.items"
+                        :key="subItem.label"
+                      >
+                        <ContextMenuSeparator
+                          v-if="subItem.separator"
+                          :class="cssClasses.separator"
+                        />
+                        <ContextMenuItem
+                          v-else
+                          as-child
+                          @select="
+                            (event: PointerEvent) =>
+                              handleItemClick(subItem, event)
+                          "
+                          :disabled="subItem.disabled"
+                          class="data-[disabled]:cursor-not-allowed"
+                        >
+                          <component
+                            v-if="subItem.component"
+                            :is="subItem.component"
+                            :active="false"
+                          />
+                          <button
+                            v-else
+                            :class="[
+                              cssClasses.itemButton,
+                              getBackgroundColor(subItem),
+                            ]"
+                          >
+                            <FeatherIcon
+                              v-if="
+                                subItem.icon &&
+                                typeof subItem.icon === 'string'
+                              "
+                              :name="subItem.icon"
+                              :class="[
+                                cssClasses.itemIcon,
+                                getIconColor(subItem),
+                              ]"
+                              aria-hidden="true"
+                            />
+                            <component
+                              :class="[
+                                cssClasses.itemIcon,
+                                getIconColor(subItem),
+                              ]"
+                              v-else-if="subItem.icon"
+                              :is="subItem.icon"
+                            />
+                            <div
+                              v-else-if="groupHasIcons(submenuGroup)"
+                              :class="cssClasses.itemIconPlaceholder"
+                            />
+                            <Tooltip v-if="shouldShowTooltip(subItem)" :text="subItem.label" placement="right">
+                              <span
+                                :class="[
+                                  cssClasses.itemLabel,
+                                  getTextColor(subItem),
+                                ]"
+                              >
+                                {{ subItem.label }}
+                              </span>
+                            </Tooltip>
+                            <span
+                              v-else
+                              :class="[
+                                cssClasses.itemLabel,
+                                getTextColor(subItem),
+                              ]"
+                            >
+                              {{ subItem.label }}
+                            </span>
+                            <span
+                              v-if="subItem.shortcut"
+                              :class="cssClasses.shortcut"
+                            >
+                              {{ subItem.shortcut }}
+                            </span>
+                          </button>
+                        </ContextMenuItem>
+                      </template>
+                    </div>
+                  </ContextMenuSubContent>
+                </ContextMenuPortal>
+              </ContextMenuSub>
+
+              <!-- Regular Item -->
+              <ContextMenuItem
+                v-else
+                as-child
+                @select="item.onClick"
+                :disabled="item.disabled"
+                class="data-[disabled]:cursor-not-allowed"
+              >
+                <slot v-if="$slots.item" name="item" v-bind="{ item }" />
+                <component
+                  v-else-if="item.component"
+                  :is="item.component"
+                  :active="false"
+                />
+                <button
+                  v-else
+                  :class="[cssClasses.itemButton, getBackgroundColor(item)]"
+                >
+                  <FeatherIcon
+                    v-if="item.icon && typeof item.icon === 'string'"
+                    :name="item.icon"
+                    :class="[cssClasses.itemIcon, getIconColor(item)]"
+                    aria-hidden="true"
+                  />
+                  <component
+                    :class="[cssClasses.itemIcon, getIconColor(item)]"
+                    v-else-if="item.icon"
+                    :is="item.icon"
+                  />
+                  <div
+                    v-else-if="groupHasIcons(group)"
+                    :class="cssClasses.itemIconPlaceholder"
+                  />
+                  <Tooltip v-if="shouldShowTooltip(item)" :text="item.label" placement="right">
+                    <span :class="[cssClasses.itemLabel, getTextColor(item)]">
+                      {{ item.label }}
+                    </span>
+                  </Tooltip>
+                  <span v-else :class="[cssClasses.itemLabel, getTextColor(item)]">
+                    {{ item.label }}
+                  </span>
+                  <span v-if="item.shortcut" :class="cssClasses.shortcut">
+                    {{ item.shortcut }}
+                  </span>
+                </button>
+              </ContextMenuItem>
+            </template>
+          </div>
+        </template>
+      </ContextMenuContent>
+    </ContextMenuPortal>
+  </ContextMenuRoot>
+</template>
+
+<script setup lang="ts">
+import {
+  ContextMenuRoot,
+  ContextMenuTrigger,
+  ContextMenuPortal,
+  ContextMenuContent,
+  ContextMenuLabel,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+} from 'reka-ui'
+import FeatherIcon from '../FeatherIcon.vue'
+import { Tooltip } from '../Tooltip'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import type {
+  ContextMenuProps,
+  ContextMenuItem as ContextMenuItemType,
+  ContextMenuGroupItem,
+  ContextMenuItems,
+  ContextMenuItemType as ContextMenuItemUnion,
+} from './types'
+
+const router = useRouter()
+
+const props = withDefaults(defineProps<ContextMenuProps>(), {
+  items: () => [],
+  disabled: false,
+  showTooltip: (label: string) => label.length > 15, // Default: show tooltip if label > 15 chars
+})
+
+// Helper function to determine if tooltip should be shown
+const shouldShowTooltip = (item: ContextMenuItemType): boolean => {
+  // Check item-level showTooltip first
+  if (item.showTooltip !== undefined) {
+    return item.showTooltip
+  }
+  
+  // Fall back to component-level prop
+  if (typeof props.showTooltip === 'function') {
+    return props.showTooltip(item.label)
+  }
+  return props.showTooltip === true
+}
+
+// Unified click handling for all context menu items
+const handleItemClick = (item: ContextMenuItemType, event: PointerEvent) => {
+  if (item.route) {
+    router.push(item.route)
+  } else if (item.onClick) {
+    item.onClick(event)
+  }
+}
+
+const normalizeContextMenuItem = (option: ContextMenuItemType) => {
+  return {
+    ...option,
+    label: option.label,
+    theme: option.theme || 'gray',
+    icon: option.icon,
+    component: option.component,
+    onClick: (event: PointerEvent) => handleItemClick(option, event),
+    submenu: option.submenu,
+    separator: option.separator,
+    shortcut: option.shortcut,
+  }
+}
+
+const getIconColor = (item: ContextMenuItemUnion) => {
+  if (item.disabled) return 'text-ink-gray-4'
+  
+  return {
+    gray: 'text-ink-gray-6',
+    red: 'text-ink-red-3',
+    green: 'text-green-800',
+    blue: 'text-ink-blue-3',
+  }[item.theme || 'gray'] || 'text-ink-gray-6'
+}
+
+const getTextColor = (item: ContextMenuItemUnion) => {
+  if (item.disabled) return 'text-ink-gray-4'
+  
+  return {
+    gray: 'text-ink-gray-7',
+    red: 'text-ink-red-3',
+    green: 'text-green-800',
+    blue: 'text-ink-blue-3',
+  }[item.theme || 'gray'] || 'text-ink-gray-7'
+}
+
+const getBackgroundColor = (item: ContextMenuItemUnion) => {
+  return {
+    gray: 'focus:bg-surface-gray-3 data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3',
+    red: 'focus:bg-surface-red-3 data-[highlighted]:bg-surface-red-3 data-[state=open]:bg-surface-red-3',
+    green: 'focus:bg-green-200 data-[highlighted]:bg-green-200 data-[state=open]:bg-green-200',
+    blue: 'focus:bg-blue-200 data-[highlighted]:bg-blue-200 data-[state=open]:bg-blue-200',
+  }[item.theme || 'gray'] || 'focus:bg-surface-gray-3 data-[highlighted]:bg-surface-gray-3 data-[state=open]:bg-surface-gray-3'
+}
+
+const getSubmenuBackgroundColor = (item: ContextMenuItemUnion) => {
+  return getBackgroundColor(item)
+}
+
+// Unified group processing for both main items and submenu items
+const processItemsIntoGroups = (
+  items: ContextMenuItems,
+): ContextMenuGroupItem[] => {
+  let groups: ContextMenuGroupItem[] = []
+  let currentGroup: ContextMenuGroupItem | null = null
+  let i = 0
+
+  for (let item of items) {
+    if (item == null) {
+      continue
+    }
+
+    if ('group' in item) {
+      if (currentGroup) {
+        groups.push(currentGroup)
+        currentGroup = null
+      }
+      let groupItem = {
+        key: i,
+        ...item,
+        items: filterItems(item.items),
+      } as ContextMenuGroupItem
+      groups.push(groupItem)
+    } else {
+      if (!currentGroup) {
+        currentGroup = {
+          key: i,
+          group: '',
+          hideLabel: true,
+          items: [],
+        } as ContextMenuGroupItem
+      }
+      currentGroup.items.push(...filterItems([item]))
+    }
+    i++
+  }
+
+  if (currentGroup) {
+    groups.push(currentGroup)
+  }
+
+  return groups
+}
+
+const getSubmenuGroups = (submenuItems: ContextMenuItems) => {
+  return processItemsIntoGroups(submenuItems)
+}
+
+const filterItems = (items: ContextMenuItemType[]) => {
+  return (items || [])
+    .filter(Boolean)
+    .filter((item) => !item.hidden) // Filter out hidden items
+    .filter((item) => (item.condition ? item.condition() : true)) // Filter by condition
+    .map((item) => normalizeContextMenuItem(item))
+}
+
+// Check if any item in a group has an icon
+const groupHasIcons = (group: ContextMenuGroupItem) => {
+  return group.items.some((item) => item.icon)
+}
+
+
+const cssClasses = {
+  // Container classes
+  contextMenuContent:
+    'w-48 max-w-[calc(100vw-40px)] sm:w-56 md:w-60 max-h-[80vh] sm:max-h-[85vh] md:max-h-[calc(100vh-40px)] overflow-y-auto divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none context-menu-content',
+  groupContainer: 'p-2 sm:p-1.5 md:p-1.5',
+
+  // Label classes
+  groupLabel: 'flex h-7 sm:h-7 items-center px-2 text-sm font-medium truncate text-left',
+  itemLabel: 'truncate text-left text-sm sm:text-base',
+
+  // Icon classes
+  itemIcon: 'mr-2 h-4 w-4 flex-shrink-0',
+  itemIconPlaceholder: 'mr-2 h-4 w-4 flex-shrink-0',
+  chevronIcon: 'ml-auto h-4 w-4 flex-shrink-0',
+
+  // Button classes 
+  itemButton:
+    'group flex h-8 sm:h-7 w-full items-center rounded px-2 text-base focus:outline-none text-left touch-manipulation',
+  submenuTrigger:
+    'group flex h-8 sm:h-7 w-full items-center rounded px-2 text-base text-ink-gray-6 focus:outline-none text-left touch-manipulation',
+
+  // Separator
+  separator: 'my-1 h-px bg-outline-gray-modals',
+
+  // Shortcut
+  shortcut: 'ml-auto text-xs text-ink-gray-5 flex-shrink-0 pl-2 hidden sm:inline',
+}
+
+const groups = computed(() => {
+  return processItemsIntoGroups(props.items)
+})
+</script>
+
+<style scoped>
+@keyframes context-menu-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes context-menu-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+:global(.context-menu-content[data-state='open']) {
+  animation: context-menu-in 100ms ease-out;
+}
+
+:global(.context-menu-content[data-state='closed']) {
+  animation: context-menu-out 75ms ease-in;
+}
+
+/* Custom scrollbar styling */
+:global(.context-menu-content) {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+:global(.context-menu-content::-webkit-scrollbar) {
+  width: 4px;
+}
+
+:global(.context-menu-content::-webkit-scrollbar-track) {
+  background: transparent;
+}
+
+:global(.context-menu-content::-webkit-scrollbar-thumb) {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+}
+
+:global(.context-menu-content::-webkit-scrollbar-thumb:hover) {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+</style>
diff --git a/src/components/ContextMenu/index.ts b/src/components/ContextMenu/index.ts
new file mode 100644
index 000000000..97770da61
--- /dev/null
+++ b/src/components/ContextMenu/index.ts
@@ -0,0 +1,2 @@
+export { default as ContextMenu } from './ContextMenu.vue'
+export type { ContextMenuProps, ContextMenuItem, ContextMenuItems } from './types'
diff --git a/src/components/ContextMenu/stories/Basic.vue b/src/components/ContextMenu/stories/Basic.vue
new file mode 100644
index 000000000..527732bcf
--- /dev/null
+++ b/src/components/ContextMenu/stories/Basic.vue
@@ -0,0 +1,22 @@
+<script setup>
+import { ContextMenu } from 'frappe-ui'
+
+const items = [
+  {
+    label: 'Open',
+    onClick: () => alert('Open clicked'),
+  },
+  {
+    label: 'Save',
+    onClick: () => alert('Save clicked'),
+  },
+]
+</script>
+
+<template>
+  <ContextMenu :items="items">
+    <div class="flex h-32 w-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 text-sm text-gray-500 hover:border-gray-400 hover:bg-gray-50 transition-colors cursor-context-menu">
+      Right click here
+    </div>
+  </ContextMenu>
+</template>
diff --git a/src/components/ContextMenu/stories/Groups.vue b/src/components/ContextMenu/stories/Groups.vue
new file mode 100644
index 000000000..bfa6b0ba8
--- /dev/null
+++ b/src/components/ContextMenu/stories/Groups.vue
@@ -0,0 +1,53 @@
+<script setup>
+import { ContextMenu } from 'frappe-ui'
+
+const items = [
+  {
+    group: 'File Operations',
+    items: [
+      {
+        label: 'Open',
+        icon: 'folder-open',
+        onClick: () => alert('Open clicked'),
+      },
+      {
+        label: 'Save',
+        icon: 'save',
+        shortcut: '⌘S',
+        onClick: () => alert('Save clicked'),
+      },
+      { separator: true },
+      {
+        label: 'Export',
+        icon: 'download',
+        onClick: () => alert('Export clicked'),
+      },
+    ],
+  },
+  {
+    group: 'Edit',
+    items: [
+      {
+        label: 'Copy',
+        icon: 'copy',
+        shortcut: '⌘C',
+        onClick: () => alert('Copy clicked'),
+      },
+      {
+        label: 'Paste',
+        icon: 'clipboard',
+        shortcut: '⌘V',
+        onClick: () => alert('Paste clicked'),
+      },
+    ],
+  },
+]
+</script>
+
+<template>
+  <ContextMenu :items="items">
+    <div class="flex h-32 w-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 text-sm text-gray-500 hover:border-gray-400 hover:bg-gray-50 transition-colors cursor-context-menu">
+      Right click for grouped items
+    </div>
+  </ContextMenu>
+</template>
diff --git a/src/components/ContextMenu/stories/Submenus.vue b/src/components/ContextMenu/stories/Submenus.vue
new file mode 100644
index 000000000..de2a7679c
--- /dev/null
+++ b/src/components/ContextMenu/stories/Submenus.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { ContextMenu } from 'frappe-ui'
+
+const items = [
+  {
+    label: 'Share',
+    icon: 'share-2',
+    submenu: [
+      {
+        label: 'Email',
+        icon: 'mail',
+        onClick: () => alert('Share via Email'),
+      },
+      {
+        label: 'Copy Link',
+        icon: 'link',
+        onClick: () => alert('Link copied'),
+      },
+      {
+        label: 'Social',
+        icon: 'share',
+        submenu: [
+          {
+            label: 'Twitter',
+            icon: 'twitter',
+            onClick: () => alert('Twitter'),
+          },
+          {
+            label: 'Facebook',
+            icon: 'facebook',
+            onClick: () => alert('Facebook'),
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Export',
+    icon: 'download',
+    onClick: () => alert('Export'),
+  },
+]
+</script>
+
+<template>
+  <ContextMenu :items="items">
+    <div class="flex h-32 w-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 text-sm text-gray-500 hover:border-gray-400 hover:bg-gray-50 transition-colors cursor-context-menu">
+      Right click for submenus
+    </div>
+  </ContextMenu>
+</template>
diff --git a/src/components/ContextMenu/stories/Themes.vue b/src/components/ContextMenu/stories/Themes.vue
new file mode 100644
index 000000000..92a548acf
--- /dev/null
+++ b/src/components/ContextMenu/stories/Themes.vue
@@ -0,0 +1,38 @@
+<script setup>
+import { ContextMenu } from 'frappe-ui'
+
+const items = [
+  {
+    label: 'Default Theme',
+    icon: 'info',
+    theme: 'gray',
+    onClick: () => alert('Gray theme'),
+  },
+  {
+    label: 'Blue Theme',
+    icon: 'info',
+    theme: 'blue',
+    onClick: () => alert('Blue theme'),
+  },
+  {
+    label: 'Green Theme',
+    icon: 'check-circle',
+    theme: 'green',
+    onClick: () => alert('Green theme'),
+  },
+  {
+    label: 'Red Theme',
+    icon: 'trash-2',
+    theme: 'red',
+    onClick: () => alert('Red theme'),
+  },
+]
+</script>
+
+<template>
+  <ContextMenu :items="items">
+    <div class="flex h-32 w-full items-center justify-center rounded-lg border-2 border-dashed border-gray-300 text-sm text-gray-500 hover:border-gray-400 hover:bg-gray-50 transition-colors cursor-context-menu">
+      Right click for themes
+    </div>
+  </ContextMenu>
+</template>
diff --git a/src/components/ContextMenu/types.ts b/src/components/ContextMenu/types.ts
new file mode 100644
index 000000000..58b0df3d8
--- /dev/null
+++ b/src/components/ContextMenu/types.ts
@@ -0,0 +1,36 @@
+import { RouterLinkProps } from 'vue-router'
+import { type Component } from 'vue'
+
+export type ContextMenuItem = {
+    label: string
+    icon?: string | Component | null
+    disabled?: boolean
+    hidden?: boolean
+    theme?: string
+    component?: any
+    onClick?: (val: any) => void
+    route?: RouterLinkProps['to']
+    condition?: () => boolean
+    submenu?: ContextMenuItems
+    separator?: boolean
+    shortcut?: string
+    showTooltip?: boolean
+}
+
+export type ContextMenuGroupItem = {
+    key?: number
+    group: string
+    items: ContextMenuItem[]
+    hideLabel?: boolean
+    theme?: string
+}
+
+export type ContextMenuItemType = ContextMenuItem | ContextMenuGroupItem
+
+export type ContextMenuItems = Array<ContextMenuItemType>
+
+export interface ContextMenuProps {
+    items?: ContextMenuItems
+    disabled?: boolean
+    showTooltip?: boolean | ((label: string) => boolean)
+}
diff --git a/src/index.ts b/src/index.ts
index 597c8c8c8..8b209e641 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -11,6 +11,7 @@ export * from './components/Breadcrumbs'
 export * from './components/Button'
 export { default as Card } from './components/Card.vue'
 export * from './components/Combobox'
+export * from './components/ContextMenu'
 export * from './components/Checkbox'
 export * from './components/DatePicker'
 export * from './components/MonthPicker'