Shadcn.io is not affiliated with official shadcn/ui
Block Type Selector
A React block type selector dropdown with Basic Blocks, Lists, and Media sections organized by DropdownMenuLabel groups
Block-based editors need organized content types—grouped menus categorize insertable blocks clearly. This React dropdown menu uses shadcn/ui DropdownMenu with Plus icon trigger featuring Text, Quote, Divider, Lists (Bulleted, Numbered, To-do), and Media (Image, Embed, Code Block) organized with DropdownMenuLabel sections. Built with Lucide React icons creating Notion-style block selector. The grouped blocks pattern improves content creation—perfect for rich editors, documentation tools, CMSes, or anywhere structured content needs categorized block insertion maintaining organization.
Block Type Selector preview
Installation
Related Components
Insert Options
Media insertion dropdown
Text Formatting
Text style formatting
Command Dialog
Keyboard-driven block selector
Grouped Dropdown
Basic grouped menu
Heading Selector
Heading level selection
Button Component
Trigger button
FAQ
Was this page helpful?
Sign in to leave feedback.