Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Patch Status Dashboard Block for Ark UI

One set of eight servers and seven pending patches that a toggle group regroups by server or by patch, a severity select, compliance bars, and a dialog that applies the critical patches in this demo.

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

See the same patching data two ways with this patch compliance panel for React with Ark UI. A Toggle Group in the header regroups one set of rows. By server, each Patchmoor host is a row under Web, API, Data or Edge: its name in mono, its OS, the patches applied and pending, the day it was last patched and a compliance bar. By patch, each pending patch is a row under Critical, High or Medium with its CVE, how many hosts still miss it and their names as chips. A Native Select narrows both views by severity without changing the panel's height. The foot's Shine Button opens a Dialog that lists each host and the critical patches it would get; confirming marks them applied on the page, and the compliance sentence, the bars and the chips move with them. It's built from Toggle Group, Native Select, Dialog, Shine Button, Empty and Guides. For operations teams and compliance reviews.

FAQ

How do I fill it with my fleet?

Edit HOSTS and PATCHES. A host has a role, an os, the day it was last patched, how many patches it has applied and the ids of the patches it still missing. A patch has a CVE, a name and a severity. Both views, the compliance percentages and the button's count are worked out from those two lists.

How is compliance worked out?

A host's compliance is its applied patches divided by applied plus missing, rounded to a whole percent, and the fleet's is the same sum over all hosts. The button counts the critical patches that at least one host still misses, so it falls to zero when every critical patch is applied.

What happens to the height when I switch views?

Nothing: both views and the unfiltered list are kept in the layout, and the visible one is shown over them, so changing the view, the severity or applying patches never moves the panel's foot. A severity with nothing pending shows a short message instead of an empty list.

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

Everything: the hosts are typed and the dialog's confirm only changes the page's state. To make it real, load the hosts and their missing patches from your patch manager, queue the install from the confirm and refresh the data when the jobs report back.

How does it look on a phone?

The toggle group fills the width above the panel, server rows become three short lines with the compliance bar at the end of the first, and patch rows keep their chips wrapping under the CVE.