shadcn.io is not affiliated with official shadcn/ui
Full Dashboard Skeleton Block for Vue
An order dashboard window that loads in place: the nav bar, headings and chart days stay while three stat cells, an orders area chart and five recent orders become data inside a scrolling page.
Installation
Overview
Show a whole app screen while it loads, with this full dashboard skeleton for Vue with Ark UI. A framed window with a fixed height holds the top bar of Aludel, an order dashboard for small shops: a mark tile, a real navigation (Overview, Reports, Team), a Load Button and the owner's initials. Below it the page scrolls inside the window: three stat cells, an area chart of orders per day and a list of the five latest orders. The bar, the nav, the headings, the stat labels and the days under the chart are real from the first paint; each figure, its change, the area, and every order's square, title, sub-line and amount are Skeleton bars that become the data in the same box, the stats one column at a time and the area growing from the start edge. Reports and Team say they are not wired in this demo. On a phone the stat cells are two columns and the nav scrolls sideways. It's built from Skeleton, Button and Guides, with plain markup for the window and a CSS entrance only. For admin consoles, shop back offices and any screen with a bar, figures, a chart and a list.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The stats, the seven daily counts and the five orders are typed in STATS, PER_DAY and ORDERS, 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 figures when they arrive. The bars are derived from the same data as the figures, so keep one component for both. The window's status line is the polite line.
Why is this a window and not a panel?
The skeleton is the screen: it has its own top bar, nav and scrolling page, so it is drawn at a fixed height with the frame's plus marks outside it. Only the page region scrolls, it takes focus so a keyboard can scroll it, and nothing the visitor does changes the window's height.
Do the nav links work?
Overview is the current page. Reports and Team are real links that don't leave the page: pressing one says in the status line that it isn't wired in this demo. Replace them with your router's links and set aria-current on the one you are on.
How does the area appear?
The chart sits in the same box as its placeholder. When the data arrives it is revealed with a clip that opens from the start edge over 700 milliseconds, after the bar fades. The clip is a CSS transition on the ChartBox wrapper, so it needs no animation library, it opens left to right in every reading direction (the plot is always laid out left to right), and under reduced motion it is off.
Does the window 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 window is a fixed height, the status line is a fixed one-line box, and each order row is a fixed height. The labels, headings and frames 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.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the overview…", 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 area is hidden from assistive technology and has a text equivalent that lists the seven counts and the busiest day. The pulse stops when the data is in, and under reduced motion there is no pulse, no spinner, no stagger and no growing: the swap is instant.