shadcn.io is not affiliated with official shadcn/ui
Support Ticket SLA Kanban Block for Svelte
A four-column helpdesk of ten tickets whose service clocks read Due in, Breached, Paused, Met or Missed against a fixed time, where a breached ticket can't be put on hold.
Installation
Overview
Watch the service clock on every ticket with this support board for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (New, Open, Pending and Solved) and ten tickets. Each card shows its reference and channel, its subject and a clock worked out from a fixed time, 19 October at 14:00, and the ticket's due time: "Due in 3 h" while it runs, an outlined clock mark inside two hours, a solid warning mark and "Breached 4 h 30 m ago" once it is late, "Paused" in Pending, and "Met" or "Missed by 3 h" in Solved. So moving a ticket changes its clock: Pending pauses it, Solved stops it. A ticket already in breach can't be put on hold, and the refusal says to reply or solve it. The sentence under the heading and the column heads count the breaches. A card moves by dragging its grip, by keyboard, or from its Dropdown Menu under "Move to". A polite status line in the foot reports each move, and Reset puts the desk back. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region with the next column showing. For shop helpdesks, internal support desks and any app with a response deadline.
FAQ
How do I fill it with my own tickets?
Edit COLUMNS and START. A ticket has an id, the column it starts in, a ref, a channel, a title and due, an ISO local time such as 2026-10-19T16:30. Every clock, count and sentence is worked out from them and from AS_OF, the fixed time the clocks are read against.
Why are the clocks fixed at 14:00 on 19 October?
So the board looks the same every time and the server and the browser agree. AS_OF is a constant and marginOf subtracts it from the due time; nothing reads the system clock. In your app, replace AS_OF with the current time and re-read it on a timer. Inside SOON minutes (120) a running clock gets the outlined mark.
Why can't a breached ticket be put on hold?
Pending pauses the clock, and pausing one that is already past its deadline would hide the breach. The rule is the function refusalOf: it refuses Pending for a ticket whose clock reads breached and says to reply and keep it Open, or to solve it. The grip, the keyboard and the menu all ask it.
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. 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, for example "Wrong size sent, Open, position 2 of 4".
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. It goes through the same hold rule as the grip and the keys, so no route gets around it. Choosing one moves the card, puts focus on it in its new place and says so in the status line.
What stays in the demo, and how do I save the changes?
Everything: the cards 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, the one function every finished move goes through (the menu, a drop and the block's own buttons), and update the cards from the response. The shop, the references and the tickets 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.