shadcn.io is not affiliated with official shadcn/ui
Editorial Flow Kanban Block for Svelte
A five-stage newsroom board of twelve pieces with a reviewer for each stage, a side sheet that opens on a headline for notes, dates and a move, and a rule that a piece needs a publish date to be scheduled.
Installation
Overview
Run a newsroom's pipeline from pitch to publication with this editorial board for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds five columns that share their lines: Pitched, Assigned, Drafting, Editing and Scheduled, each with its reviewer named under the head. Each of the twelve pieces is a card with its section in an outline Badge, the word count, the author's initials in an Avatar and the publish date once it has one. Pressing a headline opens a real Sheet from the end side (from the bottom on a phone) with the author, the word count, the keywords, the stage's reviewer, a publish date, the editor's notes in a Textarea and a "Move to" Native Select; Escape or the close button shuts it and focus returns to the headline. One rule guards the last stage: a piece without a publish date cannot be scheduled, and the refusal says so. 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 move and Reset restores the flow. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For editorial calendars, content desks and any staged review.
FAQ
How do I fill it with my own pieces?
Edit COLUMNS and START. A stage has an id, a name, a reviewer and the reviewer's role. A piece has an id, the column it starts in, a title, a section, the author, the words count, its keywords, a note and a date (an ISO date, or empty while it has none). Word counts in the heads and the header sentence are added up from the cards.
How does the side sheet work?
It is the catalog Sheet, controlled by two pieces of state: which piece is shown and whether it is open. It opens from the end side, or from the bottom on a phone, traps focus while it is open, closes with Escape or its close button and returns focus to the headline that opened it. Typing in the notes or choosing a date changes the card at once, and "Move to" in the sheet obeys the same rule as every other route without pulling focus out of the sheet.
Where does the reviewer come from?
It is a property of the stage, not of the piece: COLUMNS names one reviewer for each stage, the head shows it, and the sheet shows the reviewer of the stage the piece is in, so a move changes who reviews it. Assignments to a person are a different feature; in your app, read the reviewer from the stage's configuration.
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. Notes, dates and moves live in the component's state, nothing is saved, published or sent, and a reload or Reset brings back the starting flow. The newsroom, the writers and the stories are made up. To keep changes, call your API from put for moves and from the sheet's handlers for notes and dates.