Context Menu
rivelle/context-menuFreeComponent
A full-featured action menu opened with a secondary click.
Live preview
live · rendered by the registry
Rendered by rivelle on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://rivelle.dev/r/context-menu.jsonSource
1"use client"23import * as React from "react"4import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"5import { Check, ChevronRight, Circle } from "lucide-react"67import { cn } from "@/lib/utils"89const ContextMenu = ContextMenuPrimitive.Root10const ContextMenuTrigger = ContextMenuPrimitive.Trigger11const ContextMenuGroup = ContextMenuPrimitive.Group12const ContextMenuPortal = ContextMenuPrimitive.Portal13const ContextMenuSub = ContextMenuPrimitive.Sub14const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup1516function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {17 return <ContextMenuPrimitive.Portal><ContextMenuPrimitive.Content data-slot="context-menu-content" className={cn("z-50 min-w-48 overflow-hidden rounded-2xl border border-foreground/12 bg-popover/96 p-1.5 text-popover-foreground shadow-[0_24px_70px_-24px_color-mix(in_oklch,var(--foreground)_28%,transparent),inset_0_1px_0_color-mix(in_oklch,var(--background)_65%,transparent)] backdrop-blur-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 motion-reduce:animate-none", className)} {...props} /></ContextMenuPrimitive.Portal>18}1920function ContextMenuItem({ className, inset, variant = "default", ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & { inset?: boolean; variant?: "default" | "destructive" }) {21 return <ContextMenuPrimitive.Item data-slot="context-menu-item" data-inset={inset} data-variant={variant} className={cn("relative flex cursor-default select-none items-center gap-2.5 rounded-xl px-3 py-2.5 text-sm font-medium outline-none transition-colors data-[disabled]:pointer-events-none data-[highlighted]:bg-primary/10 data-[highlighted]:text-primary data-[inset=true]:pl-9 data-[variant=destructive]:text-destructive data-[variant=destructive]:data-[highlighted]:bg-destructive/10 data-[disabled]:opacity-45 [&_svg]:size-4 [&_svg]:shrink-0", className)} {...props} />22}2324function ContextMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {25// … truncated
What it pulls in
npm packages
Other registry items
Files it writes
More from rivelle
All 83 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | rivelle | Components | Free | 2 deps | |
| Alertalert | rivelle | Components | Free | 1 dep | |
| Alert Dialogalert-dialog | rivelle | Components | Free | 1 dep | |
| Aspect Ratioaspect-ratio | rivelle | Components | Free | 1 dep | |
| Avataravatar | rivelle | Components | Free | 1 dep | |
| Badgebadge | rivelle | Components | Free | 2 deps | |
| Breadcrumbbreadcrumb | rivelle | Components | Free | 2 deps | |
| Buttonbutton | rivelle | Components | Free | 2 deps |
