shadcn.io is not affiliated with official shadcn/ui
Footer Skeleton Block for React
A four-column site footer that loads column by column: real column heads and a mark over sixteen link bars that become typed links and a copyright line.
Installation
Overview
Show a footer while its links load, then swap the links in column by column, with this footer skeleton for React with Base UI. A hairline frame with a plus mark on each corner holds three bands from Madras, a payroll service: a heading row, the brand with a sentence over four link columns, and the copyright row. The frame, the mark and name and the four column heads (Product, Company, Resources and Legal) are real from the first paint; the sentence, the sixteen links and the copyright line are Skeleton bars that become the content in the same boxes, a column at a time from the start, when you press Load. Reload goes back to the bars. Every link says it is not wired in this demo. On a phone the columns sit two by two. It's built from Skeleton, Button and Guides, with a CSS entrance only. For sites whose footer links come from a CMS.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The sixteen links, the sentence and the copyright line are typed in COLUMNS and FOOTER, Load starts a 700 millisecond timer, and when it ends the phase becomes ready and the content 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 content when it arrives. The bars sit in the same cells as the content, so keep one component for both.
Why doesn't the footer jump when the links arrive?
Each bar and its content sit in one grid cell, so the larger of the two sets the cell's box and the swap changes nothing around it. Every link is one line of the same height as its bar, and a column has four of them whether they are bars or links. The frame and the labels are real in both phases, and the polite line reserves two lines, so the panel is as tall before, during and after loading. A heading or a paragraph that wraps to more lines than its bars is the one thing that can still move the page, so give a text bar as many lines as the text takes at that width.
Why are the column heads real while the links are bars?
The heads are the footer's structure, not its data: they exist before the links do. Showing them tells people what is coming and gives a screen reader its headings. If your heads also come from a CMS, wrap them in Cell the same way.
What does the column-by-column reveal do?
Each link's delay is its column number times 120 milliseconds, so the footer fills from the start edge, whichever way the language reads. Under reduced motion the delay is zero and the swap is instant.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the footer…", and the polite line says 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 content is in, and under reduced motion there is no pulse, no spinner and no stagger: the swap is instant.