shadcn.io is not affiliated with official shadcn/ui
Clipboard History Command Menu Block for Ark UI
A clipboard manager's command menu rising from a drawn form: nine text, code and link clips in Pinned and Recent, a type switch, a star to pin, and Enter pastes the clip into a real field in the foot that the form mirrors.
Installation
Overview
Paste from your history without hunting for it with this clipboard command menu for React with Ark UI. It rises from the one text field of a new-message form in Pastebarn, a clipboard manager, whose header holds an outline field with its ⌘ K cap, and the form is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command: nine clips of text, code and links in Pinned and Recent, each with a star, its type and when it was copied, with a ToggleGroup type switch above the field. Enter pastes the highlighted clip into a real text field in the menu's foot and the drawn form behind the menu mirrors it, so typing in that field works too, and the menu stays open for the next paste. The star, or Alt P on the highlighted clip, pins it, and on a phone the type word is dropped. 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 clips, filter and pasted text. For editors, composers and any form where the last thing you copied is not the thing you need.
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 new-message form, 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 pin, a paste or a filter 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.
What does Enter paste into?
A real text field in the menu's foot, labelled as the form's Subject field, because a palette cannot reach into the page behind it. Enter writes the clip into that field, the drawn form behind the menu shows the same text, and typing in the field edits it. The text is cut at 120 characters, Clear empties it, and the status line says what was pasted.
How does pinning work?
The star on a row is a real button that doesn't choose the row and stays out of the tab order; Alt P (Option P on a Mac) pins the highlighted row, so the keyboard has its own route. Pinned clips sit in the Pinned group above Recent, and the status line says what was pinned or unpinned. With nothing highlighted, Alt P says to move to a clip first.
How do the type switch and the search combine?
The switch shows All, Text, Code and Link, one always chosen, and the search narrows within it by the clip's words or its type. Code and links are set in mono and left to right, text follows its own direction. Changing the type starts a new list, and the foot counts the clips that match.
What stays local, and how do I wire it?
All of it, and the block never reads or writes the system clipboard. The nine clips and their times are typed constants. In your app fill START from the history your own clipboard service keeps (a page cannot read the clipboard unasked), write a pasted clip into your real field in pick, and keep the history out of the page when it may hold secrets.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter pastes, Alt P pins, and Tab reaches the type switch, the Subject field and Clear. 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.