shadcn.io is not affiliated with official shadcn/ui
No Vulnerabilities Empty State Block for Solid
A code scanner's clean results page as a scan scope: four areas with an Include switch each, a Run scan that walks through them in a simulated scan and ends on 0 found, and a shield whose dashed check turns solid.
Installation
Overview
Say "nothing found" in a way that shows what was looked at, with this no vulnerabilities empty state for Solid with Ark UI. The header and a hairline frame with a plus mark on each corner hold the scan scope of Mothguard, a code scanner: four areas (Dependencies, Container images, Source code and Infrastructure), each with an Include Switch, what it covers and a slot for its result. Under the list the Shine Button, the only colored control, runs the scan, and a Clear results button sits beside it. The scan is simulated and ends by itself: it goes through the included areas one at a time (Queued, Scanning, then "0 found" with a check glyph) and marks the others Skipped. Beside the list a shield in outline holds a check that is dashed until a scan has run and solid after it, with the line "0 found in this demo". The frame is ruled by Guides, the shield is one SVG whose classes change, and everything moves with CSS only. For the clean state of any security, license or quality scanner.
FAQ
What stays in the page, and how do I make it real?
Nothing is scanned. The areas, the switches and the results are typed in the file, every area that is included finishes with "0 found", and the page says so in its side line: "Nothing was scanned: this page only shows how an all-clear reads." The date shown is a typed day. To wire it for real, send the included area ids to your scanner where the code says so, show each area's result as it arrives, and keep the "0 found" word for areas that really have none.
How does the simulated scan work?
Pressing Run scan starts it with the areas that are on: each shows Scanning for under a second, the ones after it show Queued, and the ones before it show "0 found". The foot says which area it is on, the side cell counts "Scanning 2 of 3", and the whole thing ends by itself in a couple of seconds, so no timer loops. Areas that are off show Skipped.
What do the switches do?
Each is named for its area ("Include Source code") and chooses whether the scan covers it. Changing one while a scan is running stops it and clears the results, and the foot says "Scope changed. Run the scan again." With every switch off, Run scan says "Include at least one area." and moves focus to the first switch. The count over the list ("3 of 4 included") follows the switches.
Is the shield anything but decoration?
No. It is hidden from assistive technology; the same facts are in the side cell's heading and sentence and in the foot's status line. The check inside it is dashed until a scan has finished and then turns solid, with a CSS transition that is off under reduced motion.
Is it usable with a keyboard and a screen reader?
Tab reaches the four switches, Run scan and Clear results. The foot is one polite status line that says each step ("Scanning Container images", then "0 found in 3 areas, in this demo."), and Clear results stays in the tab order, saying "No results to clear." until there are some, then puts focus back on Run scan.
How does it look on a phone?
The list keeps all four rows with the result under the name's width, the foot is pinned to the bottom of the screen while the panel is in view so Run scan is always in reach, and the shield and its sentence sit under the list. Nothing scrolls sideways, even at 320 px wide.