shadcn.io is not affiliated with official shadcn/ui
Dashboard Header Skeleton Block for Ark UI
An app header and its page heading that load in place: tab names, the bell and the Revenue title stay while the workspace, tab counts, unread number, person and update time become data.
Installation
Overview
Show an app header while its workspace loads, with this dashboard header skeleton for React with Ark UI. A hairline frame with a plus mark on each corner holds two ruled bands from Cycloid, a billing-analytics app. Band one is the header: a workspace mark and name, three tabs (Overview, Reports, Billing) with count chips, a bell with an unread number and the signed-in person. Band two is the page heading, Revenue, with when it was last updated. The tab names, the bell and the page title are real from the first paint; the workspace, the counts, the unread number, the person and the update time are Skeleton bars that become the data in the same cell, left to right, when you press Load. The tabs and the bell say they are not wired in this demo. On a phone the tabs scroll sideways and the bell and the person stay. It's built from Skeleton, Avatar, Button and Guides, with a CSS entrance only. For analytics tools, billing consoles and any app with a top bar.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The workspace, tab counts and unread number are typed in TABS, 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 header when they arrive. The bars are derived from the same data as the real content, so keep one component for both.
Does the header keep its 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 frame, the tab names, the bell and the page title are real in both phases, and the polite line reserves two lines, so the panel is exactly as tall before, during and after loading at every width.
How is the unread count announced?
The bell is named "Notifications" in both phases, and once the data is in the count adds ", 4 unread" to its name through a screen-reader-only phrase, while the visible number is hidden from assistive technology so it is not read twice. Pass your own count and the phrase follows it.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading header…", 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 tabs are a navigation named for the product with the current one marked, and the update time is a time element with a machine-readable date.