shadcn.io is not affiliated with official shadcn/ui
Kanban Move Card Command Menu Block for Solid
A project board's command menu shown open over four columns: move the selected card to another column with live counts, add a card with a slash and a column word, and filter the board by label.
Installation
Overview
Move work across a board without dragging with this kanban command menu for Solid with Ark UI. It opens from the board in Laneloft, a project board, whose header holds an outline field with its ⌘ K cap, and the board of four columns and eleven cards is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command, and one card is selected: outlined on the board and named at the top of the menu. Move card turns the list into the four columns with their live counts, and choosing one moves the selected card there, so the counts change and the board behind follows. Type a title and the first row adds a card to Backlog, or to the column you name after a slash ("Fix tooltip delay /review"). Four label rows show only one label on the board, and the card rows select another card. 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 cards, step and query. For boards, trackers and any list whose items change state.
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 board, 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 card moved in the copy is moved 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 moving a card work?
Move card is a second step in the same shell, with a band at the top that names the card and a Back button. It lists Backlog, In progress, Review and Done with their counts, marks the current one, and the search narrows them by name. Choosing a column moves the card, returns to the list and says the new count on the status line; choosing the card's own column says it is already there. Escape in this step goes back before it closes the menu.
How does the slash work in a new card?
A last word that starts with a slash names the column by its first letters: /rev is Review, /prog is In progress. Without a slash the card goes to Backlog. A word that matches no column turns the first row into a hint that lists the four words and adds nothing, so a typo never files a card in the wrong place. The new card takes the label you are filtering by, or Docs, and becomes the selected one.
What do the label rows do?
Choosing Bug, Design, Docs or Ops shows only that label: the card rows shrink to it and the other cards on the drawn board dim. Choosing the same row again clears it, and the row says so while it is on. The selected card stays selected even when its label is hidden.
What stays local, and how do I wire it?
All of it. The cards are state in the block, the board behind the menu is drawn from the same state, and the status line says nothing is saved. In your app load START from your board, write moveTo and add through to your API, and let the board component read the same list.
Is it accessible from the keyboard?
Yes. Type to search or to write a card, the arrow keys move through the rows, Enter chooses, and Escape steps back from the columns, then 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.