shadcn.io is not affiliated with official shadcn/ui
Knowledge Base Article Kanban Block for Radix UI
A four-column board of twelve help-centre articles where a published article shows a review-date word from a fixed date, an overdue one has a Review now button, and an idea can't skip its draft.
Installation
Overview
Keep a help centre honest with this knowledge-base board for React with Radix UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (Idea, Drafting, In review and Published) and twelve articles. Each card shows its title, its topic in an outline Badge and its writer's initials in an Avatar. A published article also carries a review-date word, worked out from a fixed date and a 90-day cycle ("Overdue by 21 days", "Review due in 34 days"), with the day it was last reviewed; an overdue article has a "Review now" Button that stamps it as reviewed. Publishing an article stamps it as reviewed too, and taking it out of Published clears the stamp. The Published head counts how many are overdue, and the sentence under the heading is worked out from the cards. A card moves three ways: drag it by its grip, press Space on the grip and use the arrow keys, or open its Dropdown Menu and choose a column under "Move to". One rule guards the board: an idea can't skip its draft, so it can't go straight to In review or Published. A polite status line in the foot reports each move, and Reset puts the board back. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region with the next column showing. For help centres, documentation teams and any content that has to be re-checked on a schedule.
FAQ
How do I fill it with my own articles?
Edit COLUMNS and START. A card has an id, the column it starts in, a title, a topic, its writer's name (the initials are drawn from it) and reviewed, the ISO date it was last reviewed, which is empty for anything not yet published. The column ids idea, draft, review and published are used by the rule and the stamping, so keep them or change those two helpers with them.
Where do the review dates come from, and why is today fixed?
Every date word is worked out from AS_OF, a fixed date at the top of the file, and CYCLE, the number of days between reviews. Nothing reads the clock, so the demo shows the same overdue articles on every load and on the server and the browser alike. For real use, set AS_OF from the current date and keep the rest: the words, the counts and the header all follow.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its 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. Every step is announced in the status line.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column and the current one ticked. Choosing one moves the card, puts focus on the card in its new place and says so in the status line.
How does the draft rule work, and how do I change it?
The rule is the function refusalOf, which gets the cards, the article, the column it comes from and the column it is going to, and returns a reason or an empty string. The grip's drop, the keyboard steps and the menu all ask it, so no route gets around it. A refused move leaves the article where it was and the status line gives the reason. Replace the body with your own rule, such as requiring a named reviewer.
What stays in the demo, and how do I save the changes?
Everything: the moves and the review stamps live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting board. To save for real, call your API from put (every finished move goes through it) and from act (the Review now button), and update the cards from the response. The articles and people are made up.
How does it work 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. 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. The status line is still read out to screen readers.