Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Context Menu - Align and Distribute Menu
A React context menu with nested submenus for alignment (left, center, right, top, middle, bottom) and distribution (horizontal, vertical) controls
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Manually aligning canvas elements gets tedious fast. This React context menu provides professional alignment and distribution controls through nested submenus. Built with shadcn/ui and Radix UI with Lucide React icons, it handles six alignment directions and horizontal/vertical distribution—perfect for design editors, wireframe tools, or any layout builder where pixel-perfect positioning matters.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Layer Arrange Menu
Z-index controls for layer stacking order
Group and Lock Menu
Grouping and locking operations for elements
Transform Menu
Rotation, flipping, and scaling operations
Standard Context Menu
Basic context menu with simple items
File Context Menu
File operations with nested submenus
Dropdown Menu
Alternative menu pattern for toolbar buttons
Questions you might have
React Context Menu - Layer Arrange Menu
A React context menu for arranging layer z-index with bring to front, send to back, and incremental forward/backward controls with keyboard shortcuts
React Context Menu - Group and Lock Menu
A React context menu for grouping, ungrouping, locking, and unlocking canvas elements with keyboard shortcuts for design tools