shadcn.io is not affiliated with official shadcn/ui
Scanner Beam Sweep Grid Features Block for React Aria
A security-posture scanner: eight checks in a hairline grid with a beam that sweeps across it, a Pause scan toggle, and the chosen check's finding, fix and last scan in a band under it.
Installation
Overview
A security-posture scanner for React with React Aria. A left-aligned header says "Scan your whole posture at once" and holds a "Pause scan" toggle at its end. Under it, one rounded frame holds eight checks (TLS, headers, secrets, dependencies, accounts, ports, backups and sign-in) in a grid that shares its hairlines, four across from sm and two on a phone. Each check is a button with an icon, its name and its result: a dot and a word, with the foreground colour for a pass and the status tones for the three exceptions. A thin beam with a faint trail sweeps across the grid on a loop; it holds while the pointer is over the grid or a control has focus, and the toggle stops it. Choosing a check shows its finding, its fix and its last scan in the band under the grid (all eight share one cell and the others are invisible, so the band never changes height), with a count of passes, reviews and failures counted from the eight checks. It's built from Guides, Toggle, Status and Badge, with CSS for the beam.
FAQ
How do I use my own checks?
Edit CHECKS: each has an id, a name, an icon, a result (pass, review or fail), a finding, a fix and when it last ran. The grid, the detail band and the counts above it are all read from that list; FIRST names the check shown before anyone chooses one. A ninth check adds a cell, so keep the count a multiple of four (or two) to avoid a gap in the last row.
What does the beam do, and how do I stop it?
Nothing but draw the eye: it is decoration, a layer that slides across the grid every seven seconds with CSS. It holds while the pointer is over the grid or any control has keyboard focus, and the "Pause scan" toggle in the header stops it and fades it out until you press it again. Change --tw-animation-duration on the BEAM classes to speed it up or slow it down.
What happens with reduced motion?
The beam starts hidden and still. The toggle starts pressed, and pressing it turns the beam on for a visitor who asked for it. Everything else is unchanged, because nothing else moves on its own.
How is the grid made accessible?
The checks are a list of real buttons, each pressed when it is chosen and naming the band it controls, so Tab walks the eight and Space or Enter chooses one. The band is a labelled section whose heading is the chosen check. The results are words as well as dots, so colour is never the only signal. The beam is hidden from assistive technology.