Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Redirect Rules Order CRUD Block for Solid

A site-migration redirect table where the first match wins, with Move earlier and Move later, a quick add line, a path tester that names the matching rule, and refusals for loops, self-redirects and duplicates.

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

Manage redirects where the order is the rule, with this redirect table for Solid with Ark UI. Seven numbered rules (from pattern, to, status, hits) sit in a held, scrolling table; the first match wins, so Move earlier and Move later are the edit. A quick line takes a from pattern, a to path and a 301 or 302 Native Select and adds the rule at the end; Add rule is the one Shine Button. A trailing * and $1 are allowed. A tester above the list takes a path and names the rule that catches it and where it ends ("Rule 2: /blog/* becomes /articles/$1, 301"), from the same pure matcher that guards saving: a rule that redirects to itself or closes a loop is refused by name ("Rules 2 and 8 loop"), as is a duplicate pattern. Delete leaves an Undo. For migrations, vanity URLs and any ordered rule list.

FAQ

How do I load my own rules?

Edit RULES: each has an id, a from pattern, a to path (or an https address for another site), a status of 301 or 302 and a typed hits count. The number column, the tester and the loop check read the list in order, so the data's order is the priority.

How does the matching work?

A pattern matches exactly, or by prefix when it ends in *; $1 in the target is replaced by whatever the * caught. The first rule that matches wins, then the tester follows the result through the list until nothing matches or a path repeats, and names the first rule and where the path ends.

How are loops refused?

Before a rule is added, or two rules swap places, each rule's pattern is tried with a sample path and followed through the proposed list. If a path comes back to one it has already visited, the change is refused and the rules involved are named ("Rule 8 redirects to itself", "Rules 2 and 8 loop"). The same check refuses moves that would create a loop, since order changes which rule matches.

What else is refused?

A From without a leading slash, spaces, more than one * or one that isn't last, a To that isn't a path or an https address, a $1 with no * to fill it, and a From that another rule already handles (the message names the rule).

What stays local, and how do I wire real redirects?

Rules and the tester live in this tab and nothing is redirected; the hit counts are typed samples and a reload brings the seven rules back. In your app save the ordered list through your API, run the loop check on the server as well, and have your edge or router evaluate the rules in that order.

How does it look on a phone?

The To, status and hits columns fold into a line under the pattern ("→ /articles/$1 · 301 · 12,406 hits"), keeping the number and the three buttons. The quick add stacks its fields, and the table scrolls inside its frame.