Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Pen Test Results Dashboard Block for React

Nine penetration test findings with CVSS bars, a severity strip that filters the list, a status select and tabs for the description, a typed reproduction request and the fix, and a Mark verified button that re-derives the risk score.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Read a penetration test report and work through it finding by finding with this results panel for React with Base UI. A hairline frame with a plus mark on each corner opens with a strip of four severity cells (Critical, High, Medium and Low), each showing how many findings are still unresolved; pressing one narrows the list to that severity's unresolved findings. Under it a list of nine Probeworks findings, each with its title, a CVSS weight bar and the category, sits beside the picked finding's detail: a Native Select for its status (Open, In progress, Verified or Accepted risk) and Tabs for the description, the reproduction as a typed request and the suggested fix. The foot's Shine Button marks the finding verified, and the header sentence re-derives how many are verified and the risk score, the mean CVSS of the findings still open. It's built from Tabs, Native Select, Empty, Shine Button and Guides. For security consultancies, internal red teams and compliance reviews.

FAQ

How do I fill it with my report?

Edit FINDINGS: each finding has a title, a severity, a cvss score in tenths (98 is 9.8), a category, a status, the day it was found, a story, a fix and a request written as lines of text. The strip counts, the list, the header sentence and the risk score are all worked out from those, so nothing else needs retyping.

How is the risk score worked out?

It is the mean CVSS of the findings whose status is Open or In progress, rounded to one decimal. Marking a finding verified, or setting it to Accepted risk, takes it out of the mean, so the score falls as the report is worked through. With nothing open it reads 0.0.

What does a severity cell do?

Pressing a cell lists only that severity's unresolved findings and says so in the status line; pressing it again shows all nine. If every finding of a severity is verified or accepted, the list shows a short message instead, and the panel keeps its height either way. The picked finding's detail stays where it is when the list changes.

What stays local, and how do I wire it for real?

Everything. Statuses live in the page and are lost on reload, and the reproduction request is shown as text and never sent anywhere. To make it real, load the findings from your reporting system, write a status change back to it from the select and the foot button, and keep the request as evidence rather than something the page can run.

How do I use it with a keyboard?

The findings are a radio group: Tab enters it and the arrow keys move the selection, which updates the detail without moving focus. The severity cells are toggle buttons, the status is a native select and the tabs follow the usual arrow-key pattern.

How does it look on a phone?

The severity cells wrap into two rows of two, and the list is replaced by a select above the detail so the nine findings do not push the detail down. The tabs scroll sideways if they need to, and the foot keeps its button in view.