shadcn.io is not affiliated with official shadcn/ui
Vertical Tabs Skeleton Block for Svelte
A runbook reader with six vertical topic tabs that reload on every press: each topic swaps bars for a heading, two paragraphs and a typed command in a mono block.
Installation
Overview
Show a master and detail while the detail loads, then swap it in without moving anything, with this vertical tabs skeleton for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a band heading over a vertical Tabs list of six topics (Overview, Alerts, Escalation, Rollback, Contacts, Glossary) from Hojicha, an on-call tool, beside the open topic. The topic names are real from the first paint; the topic's heading, its two paragraphs and a typed command in a mono block are Skeleton bars that become the text in the same place. Pressing a topic is a reload, so the panel goes back to bars and comes in again. The six topics differ in length, so unseen copies hold the panel at the tallest height. On a phone the list becomes a row of chips that scrolls sideways above the topic. It's built from Skeleton, Skeleton Text, Tabs and Guides, with a CSS entrance only. For runbooks, help centres and any reader with a list of documents.
FAQ
What stays local, and how do I wire it to a real query?
Nothing is fetched. The runbook is typed in TOPICS, 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 content when it arrives. Keep one component for the bars and the data so they can't drift apart.
Why does pressing a topic reload?
Each topic is its own document in a real app, so pressing one restarts the 700 millisecond timer and shows its bars again. Only the open topic is mounted, so there are no duplicate ids. In your app, fetch on the tab change and show the bars while it is pending.
How is the height held between topics?
An unseen copy of all six topics sits in the open one's grid cell, hidden from sight, assistive technology and the keyboard, and the tallest sets the box. The live TabsContent carries flex-none, since flex would override its hidden state.
How does it look on a phone?
The list sits above the topic as a row of chips that scrolls sideways, the open one filled. The tabs stay vertical for assistive technology, so the arrow keys that move between them are Up and Down; Tab still reaches the list and then the panel.
Is it accessible?
The region is marked busy while it loads and carries a screen-reader-only "Loading topic…", 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 command is real text in a code element, selectable and read in full, and left-to-right in every language. 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.