Context Menu

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from "@line/abc-def-react/context-menu";

<script setup lang="ts">
import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from "@line/abc-def-vue/context-menu";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@line/abc-def-react/context-menu";

export function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger>Right click area</ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>Copy token</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
}

<script setup lang="ts">
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@line/abc-def-vue/context-menu";
</script>

<template>
  <ContextMenu>
    <ContextMenuTrigger
      class="flex h-24 items-center justify-center rounded-md border text-sm"
    >
      Right click area
    </ContextMenuTrigger>
    <ContextMenuContent>
      <ContextMenuItem>Copy token</ContextMenuItem>
    </ContextMenuContent>
  </ContextMenu>
</template>

Component tokens

Composition exports

Usage notes

• Mirror essential actions elsewhere for touch and keyboard users.
• Keep destructive actions visually distinct.
• Related component tokens use the `context-menu` token group in `@line/abc-def-styles/css`.