shadcn.io is not affiliated with official shadcn/ui
Terminal Skeleton Block for Svelte
A hosted dev shell in a window that loads in place: the dark pane and its prompt stay while bars become a typed npm run build session of nine lines with a warning.
Installation
Overview
Show a terminal session while it loads, then swap the output in without moving anything, with this terminal skeleton for Svelte with Ark UI. A framed window for Sanicle, a hosted dev shell, has a top bar with the terminal's name and a Load control over a pane that is dark by nature, in either theme, as a terminal is. The pane's line numbers and its prompt, a dollar sign and a block caret that does not blink, are real from the first paint; the nine lines of a typed npm run build session are Skeleton bars in the pane's own tones that become the text in the same cells, line by line, when you press Load. The command and the one warning are marked by a glyph and a weight rather than a color, and screen readers hear "Command" and "Warning". The log scrolls inside the window and the window keeps its height. It's built from Skeleton, Button and Guides, with a CSS entrance only. For hosted shells, build logs and any output that waits for a query.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The nine lines are typed in RAW, each with a one-letter kind, and no command is run. 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 data when it arrives. The bars are derived from the same data as the real thing, so keep one component for both.
Why is the pane dark when the theme is light?
A terminal is dark by nature, so the pane has its own dark scope (a dark class and a comment in the code that says so) and the window around it follows the theme. The bars use the pane's own tokens, so they are visible on it in either theme.
Does the window change size while it loads?
No. The window has a fixed height and only the log scrolls. Each line is a bar and its text in one grid cell, the numbers and the prompt are real in both phases, and the polite line is a single fixed row, so nothing around the pane moves. On a phone a long line wraps inside the log and the log scrolls.
Is it a live terminal?
No. There is no input, nothing runs and the caret does not blink, because nothing here loops. It is the loading state of a session view; put your log stream where the lines are and keep the gutter and the bars.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading the session…", 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 pane is a log region that can be focused to scroll, the line numbers and the glyphs are hidden from assistive technology, and the command and warning lines are announced with a hidden "Command" or "Warning".