WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Overlays

Context Menu

OverlaysContext Menu
Alert DialogDialog
Live props
Content
title
description
sheetTitle
showCancel
cancelLabel
backLabel
Appearance
size
radius
minWidth192px
pressFeedback
State
disabled
Behavior
responsive
longPressDelay450ms
loop
modal
Code
import { ContextMenu } from "@/components/ui/context-menu"

<ContextMenu />
Pro

v1.0.0·Added in 1.0.0

The action menu on right-click for grids and lists, and an iOS-style action sheet on a long press on phones and touch screens.

Right-click a tile and the menu grows out of the pointer on a quick spring. Hover or use the arrow keys to move the highlight, type a letter to jump, Right opens a submenu and Left closes it, Enter or Space picks, Escape closes. The shortcuts written next to items run them while the menu is open. Keyboard users reach the same menu from a focused tile with Shift+F10 or the Menu key. On a phone or a touch screen, press and hold a tile: it dips slightly while you hold, a haptic tick fires, and an action sheet slides up with the tile's name on top, 48px rows, submenus as pages with a Back row and a Cancel button at the thumb. Scrolling never opens it, and text selection with a mouse still works. With reduced motion the tile does not dip and the menu and sheet fade.

Add to a project

npx wingo-ui@latest add context-menu

Pro item: the CLI needs a Pro account. See plans

Dependencies

@radix-ui/react-context-menumotiondropdown-menumotionuse-long-pressuse-media-queryuse-shortcutui-config

Files

  • components/ui/context-menu.tsx

See also

Dropdown MenuDraweruseLongPresshookuseShortcuthook
PreviousAlert DialogNext Dialog

Saved listings

6 listings · 2 favorites

Right-click a tile, or focus one and press Shift+F10. Ctrl+C and Ctrl+Backspace run their item while the menu is open; arrow keys wrap around.

On a phone or a touch screen, hold a tile for 450ms (it dips while you hold): an action sheet titled with the tile, its price and city and a “Cancel” button slides up; “Move to collection” opens a page with “‹ Back”. Untitled sheets read as “Actions”.