Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Context Menu - Font and Style Menu
A React context menu for font and style with nested submenus for font family, size selection, plus text color and highlight color options for rich text editors
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Fonts make design—picking them shouldn't require scrolling toolbars. This React context menu provides font family and size selection via nested submenus, plus color pickers for text and highlights. Built with shadcn/ui and Radix UI with Lucide React icons—perfect for document editors, design tools, or presentation software where typography matters.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Text Formatting Menu
Bold, italic, underline formatting
Text Alignment Menu
Alignment with nested submenu structure
Text Editing Menu
Cut, copy, paste clipboard operations
Context Menu with Submenus
General nested submenu pattern
Archive and Compress Menu
Similar multiple submenus pattern
Dropdown Menu with Submenus
Alternative font selection menu
Questions you might have
React Context Menu - Spell Check Menu
A React context menu for spell checking with labeled suggestions section, correction options, add to dictionary, and ignore for text editors
React Data Table - Expandable Sub-Rows
A React data table with expandable sub-rows using TanStack Table getExpandedRowModel showing nested child content with ChevronDown toggle