A menu that appears at the pointer on right click or long press.
Installation
npx shadcn@latest add @caprice/context-menunpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };Copy and paste the following code into your project.
import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react/context-menu';/** * A component that creates a context menu activated by right clicking or long pressing. * Doesn’t render its own HTML element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#root) */export namespace Root { export type State = ContextMenuPrimitive.Root.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.Root>; export type ChangeEventDetails = ContextMenuPrimitive.Root.ChangeEventDetails; export type ChangeEventReason = ContextMenuPrimitive.Root.ChangeEventReason;}export function Root({ ...props }: Root.Props) { return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;}/** * An area that opens the menu on right click or long press. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#trigger) */export namespace Trigger { export type State = ContextMenuPrimitive.Trigger.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.Trigger>;}export function Trigger({ ...props }: Trigger.Props) { return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;}/** * A portal element that moves the popup to a different part of the DOM. * By default, the portal element is appended to `<body>`. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#portal) */export namespace Portal { export interface State extends ContextMenuPrimitive.Portal.State {} export type Props = React.ComponentProps<typeof ContextMenuPrimitive.Portal>;}export function Portal({ ...props }: Portal.Props) { return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;}/** * Positions the menu popup against the trigger. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#positioner) */export namespace Positioner { export type State = ContextMenuPrimitive.Positioner.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.Positioner>;}export function Positioner({ ...props }: Positioner.Props) { return <ContextMenuPrimitive.Positioner data-slot="context-menu-positioner" {...props} />;}/** * A container for the menu items. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#popup) */export namespace Popup { export type Props = React.ComponentProps<typeof ContextMenuPrimitive.Popup>; export type State = ContextMenuPrimitive.Popup.State;}export function Popup({ ...props }: Popup.Props) { return <ContextMenuPrimitive.Popup data-slot="context-menu-popup" {...props} />;}/** * Displays an element positioned against the menu anchor. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#arrow) */export namespace Arrow { export type State = ContextMenuPrimitive.Arrow.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.Arrow>;}export function Arrow({ ...props }: Arrow.Props) { return <ContextMenuPrimitive.Arrow data-slot="context-menu-arrow" {...props} />;}/** * An individual interactive item in the menu. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#item) */export namespace Item { export type State = ContextMenuPrimitive.Item.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.Item>;}export function Item({ ...props }: Item.Props) { return <ContextMenuPrimitive.Item data-slot="context-menu-item" {...props} />;}/** * Groups related menu items with the corresponding label. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#group) */export namespace Group { export type State = ContextMenuPrimitive.Group.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.Group>;}export function Group({ ...props }: Group.Props) { return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;}/** * An accessible label that is automatically associated with its parent group. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#group-label) */export namespace GroupLabel { export type State = ContextMenuPrimitive.GroupLabel.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.GroupLabel>;}export function GroupLabel({ ...props }: GroupLabel.Props) { return <ContextMenuPrimitive.GroupLabel data-slot="context-menu-group-label" {...props} />;}/** * Groups related radio items. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#radio-group) */export namespace RadioGroup { export type Props = React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>; export type State = ContextMenuPrimitive.RadioGroup.State; export type ChangeEventDetails = ContextMenuPrimitive.RadioGroup.ChangeEventDetails; export type ChangeEventReason = ContextMenuPrimitive.RadioGroup.ChangeEventReason;}export function RadioGroup({ ...props }: RadioGroup.Props) { return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;}/** * A menu item that works like a radio button in a given group. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#radio-item) */export namespace RadioItem { export type Props = React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>; export type State = ContextMenuPrimitive.RadioItem.State;}export function RadioItem({ ...props }: RadioItem.Props) { return <ContextMenuPrimitive.RadioItem data-slot="context-menu-radio-item" {...props} />;}/** * Indicates whether the radio item is selected. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#radio-item-indicator) */export namespace RadioItemIndicator { export type State = ContextMenuPrimitive.RadioItemIndicator.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.RadioItemIndicator>;}export function RadioItemIndicator({ ...props }: RadioItemIndicator.Props) { return ( <ContextMenuPrimitive.RadioItemIndicator data-slot="context-menu-radio-item-indicator" {...props} /> );}/** * A menu item that toggles a setting on or off. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#checkbox-item) */export namespace CheckboxItem { export type Props = React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>; export type State = ContextMenuPrimitive.CheckboxItem.State; export type ChangeEventDetails = ContextMenuPrimitive.CheckboxItem.ChangeEventDetails; export type ChangeEventReason = ContextMenuPrimitive.CheckboxItem.ChangeEventReason;}export function CheckboxItem({ ...props }: CheckboxItem.Props) { return <ContextMenuPrimitive.CheckboxItem data-slot="context-menu-checkbox-item" {...props} />;}/** * Groups all parts of a submenu. * Doesn’t render its own HTML element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#submenu-root) */export namespace SubmenuRoot { export type State = ContextMenuPrimitive.SubmenuRoot.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuRoot>; export type ChangeEventDetails = ContextMenuPrimitive.SubmenuRoot.ChangeEventDetails; export type ChangeEventReason = ContextMenuPrimitive.SubmenuRoot.ChangeEventReason;}export function SubmenuRoot({ ...props }: SubmenuRoot.Props) { return <ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-submenu" {...props} />;}/** * A menu item that opens a submenu. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#submenu-trigger) */export namespace SubmenuTrigger { export type State = ContextMenuPrimitive.SubmenuTrigger.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.SubmenuTrigger>;}export function SubmenuTrigger({ ...props }: SubmenuTrigger.Props) { return ( <ContextMenuPrimitive.SubmenuTrigger data-slot="context-menu-submenu-trigger" {...props} /> );}/** * Indicates whether the checkbox item is ticked. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#checkbox-item-indicator) */export namespace CheckboxItemIndicator { export type State = ContextMenuPrimitive.CheckboxItemIndicator.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItemIndicator>;}export function CheckboxItemIndicator({ ...props }: CheckboxItemIndicator.Props) { return ( <ContextMenuPrimitive.CheckboxItemIndicator data-slot="context-menu-checkbox-item-indicator" {...props} /> );}/** * A separator element accessible to screen readers. * Renders a `<div>` element. * * Documentation: [Caprice UI Context Menu](https://caprice-ui.com/docs/components/context-menu) * * API Reference: [Base UI Context Menu](https://base-ui.com/react/components/context-menu#separator) */export namespace Separator { export type State = ContextMenuPrimitive.Separator.State; export type Props = React.ComponentProps<typeof ContextMenuPrimitive.Separator>;}export function Separator({ ...props }: Separator.Props) { return <ContextMenuPrimitive.Separator data-slot="context-menu-separator" {...props} />;}Update the import paths to match your project setup.
Usage
import * as ContextMenu from "@/components/caprice-ui/context-menu"import * as ContextMenu from "@caprice-ui/react/context-menu"