Resource Pages
Authenticated resource workflows — searchable and selectable index, create, edit, and detail pages with activity history, plus the operator set: an alert-led index, a waiting-for work queue, a stepped record and one create/edit form with save blockers.
Preview
@props([
'title' => 'Edit project',
'description' => 'Update project details, status, or ownership.',
'indexHref' => '#',
'detailHref' => '#',
'action' => '#',
'deleteAction' => '#',
'values' => null,
'statusMessage' => null,
'failureMessage' => null,
'loadingLabel' => 'Saving…',
'dirtyGuard' => true,
])
<main
id="main-content"
data-slot="resource-edit-page"
data-surface="admin"
{{ $attributes->merge(['class' => 'min-h-screen bg-background px-4 py-8 text-foreground sm:px-6']) }}
>
<div class="mx-auto mb-6 max-w-3xl">
<x-ui.breadcrumb>
<x-ui.breadcrumb.list>
<x-ui.breadcrumb.item>
<x-ui.breadcrumb.link :href="$indexHref">{{ __('Projects') }}</x-ui.breadcrumb.link>
</x-ui.breadcrumb.item>
<x-ui.breadcrumb.separator />
<x-ui.breadcrumb.item>
<x-ui.breadcrumb.link :href="$detailHref">{{ __($values['name'] ?? 'Mobile application') }}</x-ui.breadcrumb.link>
</x-ui.breadcrumb.item>
<x-ui.breadcrumb.separator />
<x-ui.breadcrumb.item>
<x-ui.breadcrumb.page>{{ __('Edit') }}</x-ui.breadcrumb.page>
</x-ui.breadcrumb.item>
</x-ui.breadcrumb.list>
</x-ui.breadcrumb>
<h1 class="mt-4 text-2xl font-semibold tracking-tight sm:text-3xl">{{ __($title) }}</h1>
<p class="mt-2 max-w-2xl text-sm text-muted-foreground">{{ __($description) }}</p>
</div>
<x-blocks.resource-form-create-edit
mode="edit"
:action="$action"
:cancel-href="$detailHref"
:delete-action="$deleteAction"
:values="$values"
:status-message="$statusMessage"
:failure-message="$failureMessage"
:loading-label="$loadingLabel"
:dirty-guard="$dirtyGuard"
title="Project details"
submit-label="Save changes"
delete-label="Delete project"
>
@if (! $slot->isEmpty())
{{ $slot }}
@endif
</x-blocks.resource-form-create-edit>
</main>
Installation
php artisan ui:add pages/resource-page-edit
Registry contract
Install confidence
php artisan ui:add pages/resource-page-edit
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
- v2
- Foundation
- ≥ 1.0.0
| Type | Generated target |
|---|---|
| blade | resources/views/pages/resource-page-edit.blade.php |
Registry dependencies
Package dependencies
composer: jml/brok:^0.2
Use with AI
A brief for your coding agent: what the page is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this page in an assistant.
# Brok UI page: Edit Resource (`resource-page-edit`)
A source-bearing edit page with current values, Laravel update handling, submit progress, unsaved-change protection, outcome feedback, and destructive confirmation.
Brok UI is a Laravel Blade registry. `ui:add` copies this page into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.
## Install
```bash
php artisan ui:add pages/resource-page-edit
```
## Render it
```blade
<x-pages.resource-page-edit />
```
## Props
- `title` (string, default `Edit project`) — Page heading.
- `description` (string, default `Update project details, status, or ownership.`) — Page description.
- `index-href` (string, default `#`) — Resource index destination.
- `detail-href` (string, default `#`) — Resource detail and cancel destination.
- `action` (string, default `#`) — PATCH action for updates.
- `delete-action` (string|null, default `#`) — DELETE action; set null to hide the danger zone.
- `values` (array|null, default `null`) — Current values for the shared resource form.
- `status-message` (string|null, default `null`) — Success feedback after a redirect.
- `failure-message` (string|null, default `null`) — Non-validation failure feedback.
- `loading-label` (string, default `Saving…`) — Submit progress label.
- `dirty-guard` (bool, default `true`) — Enables the unsaved-change browser warning.
## Use when
- Use as the edit route for a standard authenticated application resource.
## Avoid when
- Use inline editing, composing resource-form-create-edit directly on resource-page-detail, when changes are small, reversible, and do not need a dedicated page.
## Rules
- Render the installed page with `<x-pages.resource-page-edit />` 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/pages/resource-page-edit
- Registry JSON (files, props, contract): https://brokui.dev/r/open/pages/resource-page-edit.json
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
- Use as the edit route for a standard authenticated application resource.
Avoid when
- Use inline editing, composing resource-form-create-edit directly on resource-page-detail, when changes are small, reversible, and do not need a dedicated page.
Anti-patterns
- Do not replace semantic props with conflicting utility classes.
- Do not remove labels, focus styles, or state attributes.
- Anatomy
- Theming hooks
Usage
Render the page as a component, or wire it to a route. Pass data where useful:
<x-pages.resource-page-edit />
Built from blocks & primitives
This page 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 pages.
@props([
'title' => 'Edit project',
'description' => 'Update project details, status, or ownership.',
'indexHref' => '#',
'detailHref' => '#',
'action' => '#',
'deleteAction' => '#',
'values' => null,
'statusMessage' => null,
'failureMessage' => null,
'loadingLabel' => 'Saving…',
'dirtyGuard' => true,
])
<main
id="main-content"
data-slot="resource-edit-page"
data-surface="admin"
{{ $attributes->merge(['class' => 'min-h-screen bg-background px-4 py-8 text-foreground sm:px-6']) }}
>
<div class="mx-auto mb-6 max-w-3xl">
<x-ui.breadcrumb>
<x-ui.breadcrumb.list>
<x-ui.breadcrumb.item>
<x-ui.breadcrumb.link :href="$indexHref">{{ __('Projects') }}</x-ui.breadcrumb.link>
</x-ui.breadcrumb.item>
<x-ui.breadcrumb.separator />
<x-ui.breadcrumb.item>
<x-ui.breadcrumb.link :href="$detailHref">{{ __($values['name'] ?? 'Mobile application') }}</x-ui.breadcrumb.link>
</x-ui.breadcrumb.item>
<x-ui.breadcrumb.separator />
<x-ui.breadcrumb.item>
<x-ui.breadcrumb.page>{{ __('Edit') }}</x-ui.breadcrumb.page>
</x-ui.breadcrumb.item>
</x-ui.breadcrumb.list>
</x-ui.breadcrumb>
<h1 class="mt-4 text-2xl font-semibold tracking-tight sm:text-3xl">{{ __($title) }}</h1>
<p class="mt-2 max-w-2xl text-sm text-muted-foreground">{{ __($description) }}</p>
</div>
<x-blocks.resource-form-create-edit
mode="edit"
:action="$action"
:cancel-href="$detailHref"
:delete-action="$deleteAction"
:values="$values"
:status-message="$statusMessage"
:failure-message="$failureMessage"
:loading-label="$loadingLabel"
:dirty-guard="$dirtyGuard"
title="Project details"
submit-label="Save changes"
delete-label="Delete project"
>
@if (! $slot->isEmpty())
{{ $slot }}
@endif
</x-blocks.resource-form-create-edit>
</main>
Ownership & lifecycle
Owner, release state, review evidence and adoption for this item.
- Owner
- Platform UI (@JoshJML)
- Current version
-
1.1.3 - Status
- Stable
- License
-
open - Deprecation
- Not deprecated
- Contract
-
v2 - Foundation
-
≥ 1.0.0