Context Menu

Right-click menu with sketch panel and dividers.

Roughness1.5Lock seedAnimate

<ContextMenu roughness={1.5}>
  <ContextMenuTrigger asChild>
    <Button variant="outline">Right-click</Button>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Back</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

CLI install

npx doodleui-react add context-menu

Usage

import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem } from "doodleui-react";

<ContextMenu>\n  <ContextMenuTrigger>Right click</ContextMenuTrigger>\n  <ContextMenuContent>\n    <ContextMenuItem>Back</ContextMenuItem>\n  </ContextMenuContent>\n</ContextMenu>

Props

Prop	Type	Default	Notes
animate	boolean	true	Draw-in the menu panel on open. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.