shadcn.io is not affiliated with official shadcn/ui
Redirect Rules Order CRUD Block for Radix UI
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.
Installation
Overview
Manage redirects where the order is the rule, with this redirect table for React with Radix 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.