shadcn.io is not affiliated with official shadcn/ui
Card Sorting Kanban Block for Vue
An open card sort where the columns belong to you: twelve feature cards, groups you add, rename in place and delete when empty, and a button that copies the grouping as text.
Installation
Overview
Learn how people group your features with this open card sort for Vue with Ark UI. A hairline frame with a plus mark on each corner holds an Unsorted column of twelve feature cards, and the groups are the visitor's to make: "New group" in the header, the block's one Shine Button, adds a column, up to five. A group's name is an Editable field, so a click opens it, Enter saves and Escape cancels; a name already in use is refused in a line above the board, and an empty group can be deleted. A bar above the board counts the cards sorted, and "Copy groups" is a Copy Button that puts the grouping on the clipboard as text, one line per group. Each card shows its category word in an outline Badge and how many people raised it. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu, which lists the groups as they stand now; a polite status line reports each change and Reset restores the sort. On a phone the columns scroll sideways in one named region. For user research, information architecture and any open sort.
FAQ
How do I fill it with my own cards?
Edit START and START_COLUMNS. A card has an id, the column it starts in (normally Unsorted), a title, a category word and a votes count of people who raised it. The starting groups are the columns after Unsorted; give none if you want participants to make every group. MAX_GROUPS sets how many they can add.
How are group names edited?
A click on a name opens a field with the name selected, Enter saves it and Escape puts the old one back. A blank name or one already used by another group, ignoring capitals, is refused: the field goes back to the saved name and a line above the board says why, in the same words as the status. Unsorted keeps its name and cannot be deleted; a group with cards cannot be deleted either, so a card is never lost.
What does Copy groups copy?
One line per group that holds cards, in the board's order, such as "Sharing: Share a report link, Export notes to a doc", with Unsorted last or first as it stands. The copy is real: it goes to the clipboard, and screen readers hear "Groups copied". Send the same text to your own API from the button's handler to save a participant's sort.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its title. Space or Enter picks it up, the arrow keys move it (left and right change group, and swap in right-to-left languages), Space drops it and Escape puts it back. Each step is announced in the status line.