shadcn.io is not affiliated with official shadcn/ui
Kanban Board Skeleton Block for Ark UI
A sprint board in a window that loads in place: three real columns whose counts and nine cards of titles, tags, initials and points fill in column by column.
Installation
Overview
Show a board while its cards load, then swap them in without moving anything, with this kanban board skeleton for React with Ark UI. A framed window for Dolomite, a sprint tracker, has a top bar with the sprint's name and a Load control over three columns, To do, Doing and Done. The window, the column heads and the columns are real from the first paint; the counts and the nine cards, each a title, two tags, the assignee's initials and story points, are Skeleton bars that become the data in the same cell, column after column, when you press Load. Each column scrolls inside the window, and on a phone the columns pan sideways in a snap row with the next one showing. The control is an outline Button, the frame's corners are drawn by Guides, and a one-line status says what loaded. It's built from Skeleton, Badge, Button and Guides, with a CSS entrance only. For sprint boards, pipelines and any column view that waits for a query.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The nine cards are typed in LANES, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the data swaps in; Reload goes back to the bars and in again. To wire it for real, delete the timer, the Load button and the polite line, and set data-state (loading or ready) and aria-busy on the region from your query's pending state, or use the bars as a Suspense fallback and render the real cards when they arrive. The bars are derived from the same array as the data, so keep one component for both.
Does the window change size while it loads?
Each bar and its data sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. The window has a fixed height and only its columns scroll, the cards have a fixed height, and a card's bars and its data share cells, so a column with more cards only scrolls further. The heads, labels and frame are real in both phases, and the polite line reserves two lines, so the block is exactly as tall before, during and after loading at every width.
Can I move or add cards?
No. This block is the loading state of a board, not the board: there is no drag, no Add card and no editing, so nothing here can change the order. Build those on the loaded board in your app, and keep the same card component so the bars and the cards stay in step.
How does the board look on a phone?
The columns are 78 percent of the window's width in a horizontal scroll-snap row, so the next column shows at the edge and a swipe or the arrow keys moves to it. The row and each column's list are focusable, named regions, so a keyboard can scroll both.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading cards…", and the polite line announces what loaded once. The bars are hidden from assistive technology and the layer that isn't showing is invisible, so it is neither read nor focusable. The pulse stops when the data is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant. Each column is a section named by its heading, each card list is an ordered list, and a card's initials are hidden from assistive technology in favor of "Assigned to" and the name.