shadcn.io is not affiliated with official shadcn/ui
No Error Tracking Empty State Block for Vue
An error monitor's empty list as an install guide: a code window with npm, pnpm and bun tabs and a copy button, an initialise snippet, a Send a test error button that lists one simulated row, and a calm lake whose ring turns solid.
Installation
Overview
Turn an empty error list into the three steps that fill it, with this no error tracking empty state for Vue with Ark UI. The page is Snagless, an error monitor: the rails of the page and one band across it are split in two. At the start the heading, one sentence and three steps. First a code window with Tabs for npm, pnpm and bun and a Copy Button for the command of the open tab. Second a code window with the initialise snippet. Third a Send a test error button that lists one simulated row. Under them the Shine Button, the only colored control, Copy install command. At the end a calm lake with one still boat, whose ring on the water is dashed until an error has come in and solid after it. The frame is ruled by Guides, the lake is one SVG whose classes change, and everything moves with CSS only. For the first screen of any error, log or performance tool.
FAQ
What stays in the page, and how do I make it real?
No SDK is loaded and nothing is sent. The package and host names are made up, and the test error is a row kept in the page's state: each press adds one to "Seen 3 times" and a reload clears it. To wire it for real, use your own package and key in both snippets, capture a real error where the code says so, and list what your API returns here instead of the typed row.
What do the two copy buttons do?
The small button in the code window copies the command of the open tab, and the Shine Button under the steps does the same: both write the same text to your clipboard, which is the one thing here that really leaves the page. The polite line under the steps says which command was copied ("Copied the pnpm command.") or that the clipboard refused it, with a note to copy it by hand.
How do the tabs work?
Each tab shows one package manager's command, in a window of one fixed height, so choosing a tab never moves the page. They are real tabs, so the arrow keys move between them and Tab goes on to the copy button and the command itself, which scrolls sideways inside its window on a narrow screen. The code windows follow the theme; only a real terminal would stay dark.
What does Send a test error do?
It lists one row, "TestError: demo error from this page", with how many times it was seen and the page's fixed date, turns the ring around the boat solid and adds a wider ring. The slot holds one row's height before and after, so nothing moves. Start over, which stays quiet until there is a row, clears it and puts focus back on the button.