shadcn.io is an independent project built on shadcn/ui
A plus button opens Image, Video, Link, Table, Code Block, and File. Image, Link, Table, and Code Block print shortcuts. Video and File do not.
Use it when insert actions should not take a whole toolbar. A longer list is easier to search with Command. In Svelte, Ark UI does not insert anything or listen for the keys.
Installation
Anatomy
Usage
<DropdownMenu><DropdownMenuTrigger>{#snippet asChild(props)}<Button {...props({ "aria-label": "Insert" })} size="icon-md" variant="outline"><PlusIcon aria-hidden="true" /></Button>{/snippet}</DropdownMenuTrigger><DropdownMenuContent class="w-48"><DropdownMenuItem value="image"><ImageIcon aria-hidden="true" />Image<DropdownMenuShortcut>⌘⇧I</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuItem value="video"><VideoIcon aria-hidden="true" />Video</DropdownMenuItem><DropdownMenuItem value="link"><LinkIcon aria-hidden="true" />Link<DropdownMenuShortcut>⌘K</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuSeparator /><DropdownMenuItem value="table"><TableIcon aria-hidden="true" />Table<DropdownMenuShortcut>⌘⇧T</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuItem value="code-block"><CodeIcon aria-hidden="true" />Code Block<DropdownMenuShortcut>⌘⇧C</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuSeparator /><DropdownMenuItem value="file"><FileTextIcon aria-hidden="true" />File</DropdownMenuItem></DropdownMenuContent></DropdownMenu>FAQ
What can this menu insert?
Image, Video and Link; after a separator, Table and Code Block; after another, File. The menu is w-48.
Which rows show a shortcut?
Image ⌘⇧I, Link ⌘K, Table ⌘⇧T and Code Block ⌘⇧C, each in a DropdownMenuShortcut. Video and File have none. The hints don't bind the keys; register them in your editor.
Where do the icons sit?
First in each DropdownMenuItem, aria-hidden, then the label, then the shortcut at the end of the row.
What does the trigger look like?
An outline Button with size="icon-md", a plus icon and aria-label set to Insert, since there's no visible text.
How do I insert an image when that row is chosen?
Open your file picker or upload Dialog from the Image row's handler. The menu closes first, so focus can move to it.
Set onSelect on DropdownMenu and check for details.value image.
API Reference
Dropdown Menu
Sets value="image", value="video", value="link", value="table", value="code-block" and value="file". The rest is on the Dropdown Menu page.
Button
Sets props, aria-label, Insert, size="icon-md" and variant="outline". The rest is on the Button page.
