shadcn.io is not affiliated with official shadcn/ui
Dashboard Widgets Command Menu Block for Svelte
A dashboard builder's command menu shown open as a panel at the end of the page: add, remove and reorder widgets with Enter and Ctrl or Command with the arrows, and the drawn dashboard re-flows.
Installation
Overview
Arrange a dashboard from the keyboard with this dashboard widgets command menu for Svelte with Ark UI. It opens from the Dashboard page of Gridlantern, a dashboard builder, whose header holds an outline field with its ⌘ K cap, and the dashboard is drawn under a soft scrim inside a hairline frame with a plus mark on each corner, the menu standing as a tall panel at its end. The menu is the catalog Command over nine widgets in two groups: Active ones in the order they appear, each with its place, and Available ones under them. Enter on an Active widget removes it and Enter on an Available one adds it at the end. Ctrl or ⌘ with the up or down arrow moves the highlighted Active widget one place and says where it went, "Revenue moved to 2 of 5", and each row has its own move and Remove buttons for the mouse. The drawn dashboard behind it is a two-column grid whose cards follow the order, and it shows an empty state when the last widget is removed. 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 widgets and query. For dashboards, home screens and any layout that people arrange themselves.
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 the dashboard, 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 the order you set in the copy is there 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 does reordering work?
The Active widgets are an array of ids in display order. Ctrl or ⌘ with the up or down arrow moves the highlighted id one place with shiftOf, which returns the same array at either end, and then the status line says the new place or that it is already first or last. The drawn cards take order from the same array, so the grid re-flows as the order changes. A search only filters what the list shows: the places stay the real ones, so "2 of 5" is true while you search.
Is removing a widget safe?
Pressing Enter on an Active widget removes it at once, and Enter on the same widget under Available adds it back at the end. The status line says where it went ("It is under Available, one Enter from coming back"), and a widget that was removed keeps nothing but its place in the catalog. In your app add an undo to the status line for the last removal, or keep the removal behind a confirm if widgets hold settings.
What stays local, and how do I wire it?
All of it. The order is state in the block and every status line ends with "Not saved" where it matters. In your app load the order from the user's saved layout, save it from pick and move, and replace WIDGETS with your widget registry, keeping the size ("Wide" or "Half") in the data rather than in the menu.
Is it accessible from the keyboard?
Yes. Type to search, the arrow keys move through the rows, Enter adds or removes, and Ctrl or ⌘ with the up and down arrows reorders; the foot shows the platform's key once the browser says which it is. The row buttons are for the mouse and take no focus, so the keys are the whole keyboard route. Escape closes the menu with focus on the field; 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.