Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monitoring blocks

Pro

Firewall Block Log Monitoring Block for Radix UI

A table of 60 typed blocked requests that a Collapse repeats switch folds into one row per run from the same source on the same rule, with Block, Challenge and Log toggles and a status that says how many rows stand for how many lines.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Read a firewall log without ten thousand copies of the same line, with this block log for React with Radix UI. It is Moatline, a web application firewall, and it stopped 60 requests between 14:00 and 14:09 UTC in this typed sample. In a hairline frame with a plus mark on each corner, a toolbar holds a Collapse repeats switch (on by default) and three toggles for Block, Challenge and Log, each with its count. Collapsed, consecutive lines from one source on one rule with one action become a single row with the count and the time span ("203.0.113.9, rule R-1042, x14, 14:00:52 to 14:01:18"); with the switch off every raw line shows. The table keeps a fixed height and scrolls inside itself, so flipping the switch never moves the panel, and the foot says how many rows stand for how many lines. Sources use documentation address ranges. Guides draw the frame and its bands; the entrance is CSS only.

FAQ

How do I use my own blocks?

Edit SAMPLE: each entry is time|source|rule|path|action, in time order, and RULES names the rule ids. The rows, the counts on the toggles and the status line are worked out from them; folding is a single pass that merges neighbours with the same source, rule and action.

What counts as a repeat?

Only neighbours: two lines fold when they follow each other and share the source, the rule and the action. The same source on the same rule later in the log is a new row, so a pause between two bursts stays visible.

What do the action toggles do?

They keep Block, Challenge or Log lines in the table; the folding runs after the filter, so the status "rows stand for lines" always describes what is on screen. Turning every action off shows an empty state and nothing else changes.

How does it look on a phone?

The path and action columns hide and the rule cell carries the action word; time, rule, source and the hit count stay.

What stays local in the demo?

Nothing is blocked, challenged or recorded: the lines are invented examples and the switch and toggles only change what the tab shows. In your app read the blocks from your firewall's log export.

All 100 monitoring blocks