Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Broken Link Checker Monitoring Block for Solid

A crawl result that lists pages by site section with their broken-link counts and, for the chosen page, each broken link with its status in words, Mark as fixed with Undo, Copy list and a simulated recheck.

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 the links that no longer work, and the pages that hold them, with this link crawler panel for Solid with Ark UI. It is Hyperfold, a site link crawler, showing a typed crawl of 42 pages. A list cell groups eight pages by site section (docs, blog, site, support) with how many broken links each still has; on a phone it becomes a select with the same groups. Choosing a page lists its broken links: the anchor text, the address in mono, a status in words ("Not found 404", "Unavailable 503", "Redirect loop"), an Internal or External chip and how many crawls have seen it. A segment group narrows the list to Internal or External, Mark as fixed (with Undo) sets a link aside, and Copy list puts the shown addresses on the clipboard. The Shine Button Recheck links is the one coloured control: it runs a short simulated second crawl, after which the links the data says have recovered answer 200. The header sentence ("42 pages crawled: 7 broken links on 4 pages") is counted from the links, and updates when you mark or recheck. Guides draw the frame and its bands; the entrance is CSS only. For site audits, release checks and any tool that sends editors to fix links.

FAQ

How do I load my own crawl?

Edit LEAVES: each page has a path, a section, how many links it checked and its broken hits. A hit has the anchor text, the address, code (0 stands for a redirect loop), kind (internal or external), how many crawls saw it and again, the status the recheck gets. CRAWLED is the number of pages the crawl reached. The counts, the header and the select are worked out from these.

What does Recheck links do?

It waits a moment, then marks every link whose again is 200 as recovered: it shows "Answers 200" with a check and stops counting. Nothing is requested; the status line says "Rechecked in this demo". In your app start your crawler, then replace the links with its new result.

What does Mark as fixed do?

It strikes the link through, stops counting it in the page's count and in the header, and turns the button into Undo. It is local state, so a reload puts everything back. Wire it to your tracker or your editor's task list in your app.

What does Copy list copy?

One line per broken link that is still counted in the current view (the kind you picked): the address, its status in words, the page and the anchor text. If nothing is left, the status line says there is nothing to copy. The clipboard may be blocked by the browser, in which case the status line says so.

How does it look on a phone?

The page list becomes a select with the same section groups and counts, and the broken links stack under it. The segment group, Copy list and the rows keep their size, and the foot status wraps instead of being cut.

What if a page has no broken links?

The list keeps its height and shows an empty state ("No broken links here") over it, so choosing a clean page, or narrowing to a kind with none, never moves the layout.