shadcn.io is not affiliated with official shadcn/ui
Kanban Column Skeleton Block for React Aria
A single backlog column that loads in place: a real heading and Add card button over five cards whose titles, notes, tags, due dates and initials arrive one after another.
Installation
Overview
Show one column of cards while it loads, then swap the cards in without moving anything, with this kanban column skeleton for React with React Aria. A hairline frame with a plus mark on each corner is the column: a band with the heading "Backlog" and the card count, five cards on hairlines and a ghost Add card button, all from Scoria, a product-roadmap tool. The heading and the button are real from the first paint; the count and each card's title, description line, two tags, due date and assignee initials are Skeleton bars that become the data in the same cell, card after card, when you press Load. Add card says it isn't wired in this demo. The control is an outline Button, the bands are ruled by Guides, and a polite line says what loaded. It's built from Skeleton, Badge, Button and Guides, with a CSS entrance only. For backlogs, idea lists and any single column that waits for a query.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The five cards are typed in CARDS, 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. Add card is a plain button: connect it to your own create flow.
Does the column keep its height 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. Every card has a fixed height with its title, note, tags, due date and initials laid out inside it, and each part's bar and data share one cell. 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.
What does Add card do?
Nothing, and it says so: "Add card isn't wired in this demo." While the column loads the button is marked disabled for assistive technology but stays focusable, so focus is never dropped. Wire it to your own create call and put the new card at the top of your data.
How does it look on a phone?
The column is already one list, so it stays as it is: the text truncates on one line, and below 22 rem the due date is hidden so the tags and the initials still fit.
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. The cards are an ordered list named "Backlog cards", and the initials are hidden from assistive technology in favor of "Assigned to" and the name.