shadcn.io is not affiliated with official shadcn/ui
Security Center Sidebar Block for React Aria
A security operations console in a fixed-height window whose slim sidebar holds vertical severity toggles with open counts that filter the alert list, plus Acknowledge all shown and per-alert Reopen on the page.
Installation
Overview
Triage alerts by severity with this security center sidebar for React with React Aria. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar for Bulwarkfield, a security console, whose Severity group is a vertical Toggle Group: Critical, High, Medium and Low, each a glyph, the word and the number of alerts still open, the type lighter as the severity falls. The toggles filter the alert list on the page, and with none chosen every severity shows. Acknowledge all shown in the top bar marks every open alert in view as acknowledged, and a row's own button acknowledges or reopens just that one; the counts follow either way. Assets and Compliance stay as plain pages. Folded to icons, the rail hides the toggles and keeps the pages. It's built from Sidebar, Toggle Group, Button, Avatar and Guides, with a CSS entrance only. For security consoles, incident queues and any list with levels.
FAQ
How is severity shown without colour?
Three ways together: a glyph shape (an octagon for Critical, a triangle for High, a circle for Medium, an info mark for Low), the word itself and the weight of the type, which is heaviest for Critical. None depends on a hue, so it reads the same in every theme and in print.
What do the counts count?
Alerts of that severity that are still open. Acknowledging lowers them and reopening raises them; they are counted from the alert list, not typed. The Alerts link carries the total open, in its name for a screen reader.
What does Acknowledge all shown do?
It acknowledges the open alerts that the chosen severities show, leaving others alone, and the status line says how many and how many are still open. Acknowledged rows stay in the list with a check and the word Acknowledged, and each has a Reopen button. When nothing is left to acknowledge, the button says so instead of doing nothing.
Can the list ever be empty?
Not by the filter: each severity has alerts in the file. Acknowledged alerts stay visible so the list never changes height under your hands. In your app, add an empty state for a severity with nothing open.
What stays in the page, and how do I connect it?
Everything. The alerts are typed in the file, acknowledging only changes the block's state, and nothing is sent. To make it real, call your acknowledge endpoint in the handler and load the alerts from your source. The pages are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with href, which React Aria renders as a link.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet opened by the menu button in the top bar, with the severity toggles inside it. The top bar keeps the title and an icon button named Acknowledge all shown, and the status line under the page says how many alerts the filter shows.