shadcn.io is not affiliated with official shadcn/ui
No Vulnerabilities Empty State Block for React
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 React with Base 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.
Related
- Pro
No Alerts Empty State
MonitoringAn ops status board's quiet alerts page: a bell under a glass dome, four systems that each say Operational with a drawn 30-day strip, and a Send a test alert button that fills a dashed slot with a typed row you can dismiss.
- Pro
No Error Tracking Empty State
Developer toolsAn 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.
- Pro
No Permissions Empty State
Team and accessAn access-control tool's empty rules page: a preset strip over a real matrix of checkboxes (Projects, Docs and Billing by Create, Read, Update and Delete), a count, a Save rules foot, and a garden gate that opens as you allow more.
- Pro
Notification Preferences Settings
NotificationsA notification settings panel: a channel strip with all-or-nothing checkboxes, a matrix of switches by activity and channel with a locked security email, quiet hours, and a save bar that counts unsaved changes.
- Pro
No Audit Trail Empty State
Team and accessA compliance tool's empty ledger: retention policy radio cards beside a vault door whose dial turns to the choice, and an empty table of Time, Actor, Action and Resource whose first row is written when the policy is saved.
- Pro
No Incidents Empty State
MonitoringAn incident tracker's quiet log: a calendar of 13 weeks of 7 quiet dots, a 30, 60 or 90 day range that re-slices the grid and the line 0 incidents in 60 days, and a Run a drill button that marks one day with a tooltip.