shadcn.io is not affiliated with official shadcn/ui
Documentation Kanban Block for Svelte
A docs pipeline of ten pages in Draft, Review, Published and Outdated, with a last-reviewed word on each page and a Take it button that a page without an owner needs before it can leave Draft.
Installation
Overview
Keep a documentation set honest with this docs pipeline kanban for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (Draft, Review, Published and Outdated) and ten pages. Each card shows the page's title, its path in mono, a last-reviewed word worked out from a fixed date ("Reviewed 12 days ago", "Never reviewed") and either its owner's initials in an Avatar or a "Take it" Button. A page without an owner can't go to Review or Published, and the refusal says so; a page that reaches Published is stamped as reviewed on that date. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to". The sentence under the heading counts the published, outdated and unowned pages, and a polite status line in the foot reports every move. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For developer docs, help centres, runbooks and any set of pages that goes stale.
FAQ
How do I fill it with my own pages?
Edit COLUMNS, YOU and START. A page has an id, a title, a path, an owner (empty until someone takes it), a reviewed ISO date (empty when it was never reviewed) and the column it starts in. The words, the counts and the header sentence are calculated from the cards and the fixed AS_OF date.
What does Take it do, and why does Outdated allow unowned pages?
It gives the page to the person named in YOU, which in a real product would be the signed-in user. The owner rule only guards Review and Published, the two places where someone must answer for the page; a page can sit in Draft or Outdated without one, which is how an orphaned page shows up on the board.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the page's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. A step into Review or Published without an owner is refused in the status line and the page stays where it was. Every step is announced in the status line in the foot.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists every column under "Move to" with the current one ticked, so one choice 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.
What stays in the demo, and how do I save it?
Everything: The moves, the owners and the review stamps live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. To save for real, call your API from put (every finished move, where the review stamp is set) and from act (Take it), then update the cards from the response. The product, the people and the cards are made up.
How does it look on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps when a card moves. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card.