Atoms

Context Menu

Opens a menu on right-click.

shadcn/uiBased on shadcn/ui with Formance brand styling.

Right click here

Installation#

npx shadcn@latest add @formance/context-menu

Install the following dependencies:

npm install radix-ui lucide-react

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from '@/components/ui/context-menu'

<ContextMenu>
  <ContextMenuTrigger>Right-click on transaction</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>View details</ContextMenuItem>
    <ContextMenuItem>Copy transaction ID</ContextMenuItem>
    <ContextMenuItem>View in ledger</ContextMenuItem>
    <ContextMenuItem variant="destructive">Revert transaction</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>