A menu that appears at the pointer on right click or long press.
Installation
npx shadcn@latest add @caprice/context-menupnpm dlx shadcn@latest add @caprice/context-menuyarn dlx shadcn@latest add @caprice/context-menubunx shadcn@latest add @caprice/context-menunpm install @caprice-ui/reactpnpm add @caprice-ui/reactyarn add @caprice-ui/reactbun add @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactpnpm add @base-ui/react lucide-reactyarn add @base-ui/react lucide-reactbun add @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';
export const { cva, cx: cn } = defineConfig({
hooks: {
onComplete: (className: string) => twMerge(className),
},
});
export type { VariantProps };
export { getSchema };
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 context menu popup against the pointer or a custom 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#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 `<span>` 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 `<span>` 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"Examples
API Reference
Last updated on