Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Security Overview Dashboard Block for Solid

A posture score of 100 minus the weight of open issues, five control switches worth points, open issues by severity and the latest alerts, all re-derived together when you flip a control.

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

Know why the security score is what it is with this posture panel for Solid with Ark UI. A hairline frame with a plus mark on each corner puts the score in an 18rem side cell as the one headline figure, a Sliding Number that rolls when it changes, with the sum written out: 100 minus the weight of the open issues, where Critical counts 10, High 6, Medium 3 and Low 1. Under it, four lines show the open issues by severity as bars. The main column lists five Moatwise controls, each a Switch with the points it is worth, and the latest open alerts below them, the top one marked with a Status dot. Turning a control on closes its issues and drops the alerts it would have prevented, so the score, the list and the alerts always agree, and the status line says what moved: score 76 to 85, open alerts 5 to 4. It's built from Switch, Sliding Number, Status and Guides. For admin consoles and security reviews.

FAQ

How do I fill it with my controls and issues?

Edit CONTROLS, ISSUES and ALERTS. An issue has a severity and the control that closes it, empty when no control here does. An alert names the control that would have prevented it. A control's points are the weights of the issues it closes, so they are worked out rather than typed, and START_ON lists the controls that begin switched on.

Can the score be explained?

Yes, and the side cell does: the score is 100 minus the total weight of the open issues, and the weights are in the text beside it. Switching a control off reopens its issues and alerts, which lowers the score by exactly the points shown on the control's row.

Why does the alert list stay the same height?

It shows at most five open alerts and reserves room for all five, so the panel does not shift when an alert drops out or comes back. The heading says how many of the open alerts are shown, and each row says which control would stop it.

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

Everything, and the status line says so: the controls are typed switches and nothing in your workspace changes. To make it real, read each control's state from your admin API, send the change when a switch flips and compute the issues and alerts from your own findings.

How does it look on a phone?

The score and the issue bars come first, then the controls, then the alerts, which is also the order a screen reader meets them in. The side cell becomes a block above the controls instead of a column beside them.