Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Firewall Rules Dashboard Block for Svelte

Eight ordered firewall rules and a packet tester: a real IPv4 range match decides Allowed or Denied by the first rule on that matches, shadowed rules are named, and switches and arrows change the result at once.

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

Find out which rule really decides, with this firewall rules panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner opens with a packet tester: a source address, a destination group, a port and a protocol, checked in your browser against eight rules from top to bottom with true IPv4 range matching. The first rule that is on and matches wins, its row is marked and a polite line says "Allowed by rule 2" or "Denied by rule 1"; a packet no rule catches is denied by default. A rule an earlier, broader rule already catches reads "Shadowed by rule 1", so you can see which entries never fire. Each rule has a Switch and up and down buttons that renumber the priorities, and the verdict follows every change. The test button is a Shine Button; the fields are an Input and a Native Select beside a Badge for each action, all ruled by Guides. For network consoles and security settings.

FAQ

How do I fill it with my rules?

Edit RULES and GROUPS. A rule has a name, a note, a source in CIDR form or any, a destination group id or any, a port (0 means any), a protocol of tcp, udp or any, an action of allow or deny and the hits of the last day. The order of the array is the priority; the tester, the shadow notes and the counts in the header are all worked out from it.

How is a packet matched?

The source address is turned into a number and compared with each rule's range by arithmetic, so 198.51.100.77 is inside 198.51.100.0/24 and outside 198.51.101.0/24. The destination group, port and protocol must also fit, where a rule's any matches everything. Rules that are switched off are skipped. The first rule left that matches decides, and when none does the packet is denied by default.

What does shadowed mean?

A rule is shadowed when a rule above it, that is on, already covers every packet it could match: a wider source range, the same or a wider destination, port and protocol. It can never decide anything, so the note names the rule above. Move it up, or switch the covering rule off, and the note goes away.

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

Everything. The rules, the order and the switches live in this page, the hit counts are typed and nothing is sent to a firewall. To make it real, load the rule list from your firewall's API, save the new order and switch state back to it, and keep the same matching function so the tester agrees with what the device does.

How do the arrows and the switches work from the keyboard?

Every control is a real button or switch in the table, reached with Tab. After you move a rule, focus stays on the same arrow so you can press it again. The first rule's up arrow and the last rule's down arrow are marked unavailable and say so in the status line instead of doing nothing silently.

How does it look on a phone?

The tester comes first, then the table keeps the priority, the rule with its switch and the arrows. The source, destination, port, action and hit columns fold into the rule's second line, so nothing scrolls sideways.