shadcn.io is not affiliated with official shadcn/ui
Bookmark Manager Command Menu Block for Ark UI
A link library's command menu shown open over its library page: twelve saved links with lettermark tiles, a column of folders with counts, a star on each row, and Enter or Ctrl Enter to open in the page or a new tab.
Installation
Overview
Find a saved link by folder or by memory with this bookmark command menu for React with Ark UI. It opens from the Library page of Linkhearth, a link library, whose header holds an outline field with its ⌘ K cap, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command in the wide size, split in two: a column of folders at the start (All, Reading, Tools, Recipes, each with its count) in a vertical ToggleGroup, and the links beside it, each with a two-letter lettermark tile, its title, its host as text and a star. On a phone the folders become a row that scrolls sideways. The star on a row, or Alt S on the highlighted one, stars the link; Enter opens it in the drawn page and Ctrl or ⌘ Enter in a new drawn tab, and the status line says which. Nothing loads. For preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same links, folder and stars. For link libraries, read-later lists, snippet shelves and any collection with a few folders and a lot of items.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of a library page, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a folder or a star in the copy is in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How do the folders and the search combine?
The folder narrows the list first and the search narrows what is left, over the title, the host and the folder's name. In All the links are grouped under their folder's heading; inside one folder there is a single group. Changing folder starts a new list, so the first row is highlighted again, and the foot says "5 of 12 bookmarks" while a search is narrowing it.
How does the star work with a keyboard?
The star on a row is a real button that does not open the row and stays out of the tab order, so the keyboard has its own route: Alt S (Option S on a Mac) stars or unstars the highlighted link, and the status line says which and how many are starred. With nothing highlighted it says to move to a bookmark first. The star is a pressed toggle, filled when on, and not a colour.
What is the difference between Enter and Ctrl or ⌘ Enter?
Enter opens the link in the drawn page, which changes the page's tab title; Ctrl or ⌘ Enter adds a second drawn tab instead, keeping the last two. Both close the menu and say which happened ("in this tab" or "in a new tab") with the honest tail that nothing loads. A browser would navigate or call window.open there, so wire your own go function.
What stays local, and how do I wire it?
All of it. The twelve links, their hosts and the lettermarks are typed constants, the hosts are reserved example domains, and stars live in state. In your app fill LINKS from your library, store stars on the server, and replace the lettermark with the site's favicon where you have the right to show it (the slot is marked in MarkTile).
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter opens, Ctrl or ⌘ Enter opens in a new tab, Alt S stars, and Tab reaches the folders. Escape closes the menu with focus on the field, and Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a combobox and the first is highlighted when it opens.