Not Found

Open source

404 sections — a bold centered layout, a masked oversized numeral, and one with a search field and helpful links.

3 of 3

resources/views/blocks/not-found-links.blade.php Blade

@props([
    'code'        => '404',
    'heading'     => 'Page not found',
    'description' => 'Sorry, we couldn\'t find the page you\'re looking for. It may have been moved, renamed, or removed.',
    'searchLabel' => 'Search the site…',
    'linksTitle'  => 'Or try one of these',
    'links'       => null,
])

@php
    $links ??= [
        ['href' => '/', 'title' => 'Home', 'description' => 'Go back to the homepage', 'icon' => 'home'],
        ['href' => '/docs', 'title' => 'Documentation', 'description' => 'Browse guides, references, and examples', 'icon' => 'book'],
        ['href' => '/blog', 'title' => 'Blog', 'description' => 'Read the latest articles and updates', 'icon' => 'news'],
        ['href' => '/contact', 'title' => 'Contact', 'description' => 'Get in touch with our support team', 'icon' => 'mail'],
        ['href' => '/status', 'title' => 'Status', 'description' => 'Check system health and uptime', 'icon' => 'activity'],
    ];

    $icons = [
        'home' => '<path d="m3 10 9-7 9 7" /><path d="M5 9v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9" /><path d="M9 21v-6h6v6" />',
        'book' => '<path d="M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2Z" /><path d="M19 17H6a2 2 0 0 0-2 2" />',
        'news' => '<rect x="3" y="4" width="18" height="16" rx="2" /><path d="M7 8h10M7 12h6M7 16h8" />',
        'mail' => '<rect x="3" y="5" width="18" height="14" rx="2" /><path d="m3 7 9 6 9-6" />',
        'activity' => '<path d="M22 12h-4l-3 9L9 3l-3 9H2" />',
    ];
@endphp

<x-ui.section space="xl" class="flex min-h-[60vh] items-center" {{ $attributes }}>
    <div class="mx-auto w-full max-w-2xl px-4 text-center">
        <p class="text-7xl font-bold text-muted-foreground sm:text-8xl" aria-hidden="true">{{ $code }}</p>
        <h1 class="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h1>
        <p class="mt-4 text-muted-foreground">{{ __($description) }}</p>

        <form role="search" action="/search" method="GET" class="mt-8">
            <label for="not-found-search" class="sr-only">{{ __($searchLabel) }}</label>
            <div class="flex gap-2">
                <x-ui.input-group class="flex-1">
                    <x-ui.input-group.addon><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.35-4.35" /></svg></x-ui.input-group.addon>
                    <x-ui.input-group.input id="not-found-search" type="search" name="q" :placeholder="__($searchLabel)" aria-label="{{ __($searchLabel) }}" />
                </x-ui.input-group>
                <x-ui.button type="submit" variant="default">{{ __('Search') }}</x-ui.button>
            </div>
        </form>

        <div class="mt-12 text-start">
            <h2 class="mb-4 text-sm font-semibold uppercase tracking-widest text-muted-foreground">{{ __($linksTitle) }}</h2>
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                @foreach ($links as $link)
                    <a href="{{ $link['href'] }}" class="group flex items-start gap-4 rounded-lg border border-border p-6 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                        <span class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground ring-1 ring-border group-hover:bg-background" aria-hidden="true">
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                {!! $icons[$link['icon']] ?? $icons['home'] !!}
                            </svg>
                        </span>
                        <span class="min-w-0 flex-1">
                            <span class="block font-medium text-foreground">{{ __($link['title']) }}</span>
                            <span class="mt-0.5 block text-sm text-muted-foreground">{{ __($link['description']) }}</span>
                        </span>
                        <svg class="mt-2 size-4 shrink-0 self-start text-muted-foreground transition-transform group-hover:translate-x-0.5 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M5 12h14M13 6l6 6-6 6" />
                        </svg>
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/not-found-links

Installs these dependencies automatically:

button section input-group

Registry contract

Install confidence

php artisan ui:add blocks/not-found-links writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version: 1.1.3
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/blocks/not-found-links.blade.php

Registry dependencies

button section input-group

Package dependencies

composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.

not-found-links.md

# Brok UI block: Not Found Links (`not-found-links`)

A 404 section with an oversized numeral, a search field and a grid of helpful destination links, each an icon row with title, description and arrow.

Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.

## Install

```bash
php artisan ui:add blocks/not-found-links
```

## Render it

```blade
<x-blocks.not-found-links />
```

## Props

- `code` (string, default `404`) — Error code shown as the large muted numeral.
- `heading` (string, default `Page not found`) — Primary heading.
- `description` (string, default `Sorry, we couldn\'t find the page you\'re looking for. It may have been moved, renamed, or removed.`) — Supporting copy under the heading.
- `search-label` (string, default `Search the site…`) — Placeholder and accessible label for the search field.
- `links-title` (string, default `Or try one of these`) — Heading above the suggested-links grid.
- `links` (mixed|null, default `null`) — Rows of {href, title, description, icon}; null falls back to a 5-item sample: home, docs, blog, contact, status.

## Use when

- Showing a 404 page with a native site-search field plus a grid of suggested destination links, each with an icon, title, and description.
- Helping visitors self-navigate away from a dead link with more than one recovery path.

## Avoid when

- Needing a minimal 404 without a search field or link grid; use not-found-bold, or use not-found-masked for a purely decorative numeral treatment.

## Rules

- Render the installed block with `<x-blocks.not-found-links />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.

## Links

- Docs: https://brokui.dev/blocks/not-found-links
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/not-found-links.json

Ask about Not Found Links in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

Guidance

Use when

Showing a 404 page with a native site-search field plus a grid of suggested destination links, each with an icon, title, and description.
Helping visitors self-navigate away from a dead link with more than one recovery path.

Avoid when

Needing a minimal 404 without a search field or link grid; use not-found-bold, or use not-found-masked for a purely decorative numeral treatment.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Anatomy: numeral heading description search form destination link grid

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.not-found-links />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

This block composes installed <brok:*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.