shadcn.io is not affiliated with official shadcn/ui
Security Alerts Chat Block for React Aria
A bot channel of four typed security alert cards with a severity glyph and word, Isolate host, Block IP and Dismiss responses that change the state, and a severity filter with counts.
Installation
Overview
Show a security channel with this security alerts chat for React with React Aria. A framed window of fixed height holds the Sentrymoor bot's posts, marked with a Badge that says Bot, and nobody types. Each alert is a card with its severity as a word and a glyph shape (a triangle for Critical, a diamond for High, a circle for Medium), the asset, a made-up source address, the time, a state word (New, then Contained, Blocked or Dismissed) and three Buttons: Isolate host, Block IP and Dismiss. A response changes the state word, turns the buttons off and adds a line such as "Isolated build-07, in this demo". The foot is a Toggle Group that filters the log by severity, with a count on each choice, and the top bar counts the alerts still open. There is no composer and no primary button. The frame is ruled by Guides.
FAQ
What stays in the page, and how do I make it real?
All of it. The four alerts and their addresses are typed, the addresses come from the ranges reserved for examples, and a response only changes this block's state and the log. Nothing is isolated, blocked or dismissed. To wire it for real, call your own tooling in respond before the state changes, and append new alerts to the same list as your monitor raises them.
How is severity shown without color?
By a word and a shape together: Critical is a filled triangle, High a filled diamond, Medium a circle. The state is a word too. Nothing in the card depends on hue, so it reads the same in any theme and in print.
What happens when I press a response?
The state word changes, all three buttons on that card turn off, a line is added to the end of the log, the line under the foot says the same, and focus moves to the card's heading so the keyboard is not left on a disabled button. One alert is already contained when the page opens.
How does the severity filter work?
Choosing Critical, High or Medium hides the other alerts and the lines about them; All shows everything again. The counts are worked out from the alert list, and the "Open" count in the top bar is worked out from the states. The log keeps its height and only scrolls.
Is it usable with a keyboard and a screen reader?
Yes. The log is a focusable region announced as a log, each alert is an article named by its severity and asset, the addresses read left to right inside right-to-left text, and the filter is a labelled group of toggle buttons. Response buttons carry the asset name as hidden text.