shadcn.io is not affiliated with official shadcn/ui
Content Pipeline Kanban Block for Vue
A four-stage content board of twelve posts with a channel chip on each card, an author and due button that opens a quick-edit popover, and a Draft column that re-sorts by due date when you save.
Installation
Overview
Plan posts across channels with this content board for Vue with Ark UI. A hairline frame with a plus mark on each corner holds four columns that share their lines: Draft, In review, Scheduled and Published. Each of the twelve posts is a card with a channel chip, an outline Badge with an icon and a word (Blog, Newsletter, Social or Podcast), and an author and due button that opens a quick-edit Popover: an author Native Select, a due select of six fixed dates, Save and Cancel. Saving changes the card and puts the Draft column back in due-date order, and the status line says what moved ("Due moved to 21 Oct"); Cancel and Escape discard the change, and published posts are read-only. A card also moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu; a polite status line in the foot reports each change and Reset restores the pipeline. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For editorial calendars, social queues and any board where owner and date change often.
FAQ
How do I fill it with my own posts?
Edit COLUMNS, AUTHORS, DUES and START. A post has an id, the column it starts in, a title, a channel of Blog, Newsletter, Social or Podcast, an author from the list and a due date as an ISO string. Add a channel by adding a branch to ChannelIcon. The header sentence counts what is due within a week from a fixed date.
How does the quick edit work?
The author and due button opens a popover with two selects and Save and Cancel. The choices are held in the popover until Save; Cancel, Escape and a click outside discard them, and reopening starts from the card again. Save is the one primary button, it closes the popover, changes the card and, in Draft, puts the column back in due-date order so the card finds its place.
Why is the channel a chip with an icon and a word?
So that it does not depend on colour: the icon shows the channel at a glance and the word says it to a screen reader and to anyone who cannot tell the icons apart. Channels have no colours of their own, and the same chip works in any theme.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, ArrowUp and ArrowDown change its place, ArrowLeft and ArrowRight go to the neighbouring column (they swap in right-to-left languages), Home and End jump to the top and bottom, Space drops it and Escape puts it back. Each step is announced in the status line.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists the columns with the current one ticked, so one click moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch, and it obeys the same rule as dragging.
What stays in the demo?
Everything. Edits and moves live in the component's state, nothing is saved, scheduled or published, and a reload or Reset brings back the starting pipeline. The publication, the writers and the posts are made up. To keep changes, call your API from act for edits and from put for moves.