Settings Pages

Open source

Full settings screens — personal account settings with anchored section navigation and server-ready forms, and organization settings with a side-column section nav.

2 of 2

resources/views/pages/settings-layout.blade.php Blade

{{--
    Settings Layout — an organization settings screen: the page header, a
    section nav in the side column and the grouped organization and
    preference forms in the main column. `nav` is the section list a host
    renders its own routes into; the defaults render the sample screen.
--}}
@props([
    'title' => 'Settings',
    'subtitle' => 'Manage your organization configuration.',
    'action' => '#',
    'nav' => null,
])

@php
    $nav ??= [
        ['label' => 'General', 'href' => '#', 'current' => true],
        ['label' => 'Members', 'href' => '#', 'current' => false],
        ['label' => 'Billing', 'href' => '#', 'current' => false],
        ['label' => 'Security', 'href' => '#', 'current' => false],
        ['label' => 'API keys', 'href' => '#', 'current' => false],
    ];
@endphp

<x-ui.section as="main" data-slot="settings-layout" data-surface="admin" space="none" class="min-h-svh py-4 sm:py-6 lg:py-8" {{ $attributes }}>
    <x-ui.container size="md">
        <x-ui.admin.page-header :title="__($title)" :scope="__($subtitle)" class="mb-8">
            <x-slot:actions></x-slot:actions>
        </x-ui.admin.page-header>

        <div class="grid gap-8 lg:grid-cols-[14rem_1fr]">
            <aside>
                <nav class="grid gap-2 text-sm" aria-label="{{ __('Settings') }}">
                    @foreach ($nav as $item)
                        <x-ui.sidebar.menu-button :href="$item['href']" :active="$item['current'] ?? false">
                            {{ __($item['label']) }}
                        </x-ui.sidebar.menu-button>
                    @endforeach
                </nav>
            </aside>

            <form method="POST" action="{{ $action }}" class="space-y-6">
                @csrf

                <x-ui.card>
                    <x-ui.card.header>
                        <x-ui.card.title>{{ __('Organization') }}</x-ui.card.title>
                        <x-ui.card.description>{{ __('Basic information about your organization.') }}</x-ui.card.description>
                    </x-ui.card.header>
                    <x-ui.card.content class="space-y-4">
                        <x-ui.field>
                            <x-ui.label for="org-name" required>{{ __('Organization name') }}</x-ui.label>
                            <x-ui.input id="org-name" name="org_name" value="Acme Inc." required />
                        </x-ui.field>
                        <x-ui.field>
                            <x-ui.label for="org-slug">{{ __('Workspace URL') }}</x-ui.label>
                            <x-ui.input id="org-slug" name="org_slug" value="acme" />
                            <x-ui.field.description>{{ __('Used in your public workspace links.') }}</x-ui.field.description>
                        </x-ui.field>
                    </x-ui.card.content>
                </x-ui.card>

                <x-ui.card>
                    <x-ui.card.header>
                        <x-ui.card.title>{{ __('Preferences') }}</x-ui.card.title>
                    </x-ui.card.header>
                    <x-ui.card.content class="space-y-4">
                        <x-ui.switch-field id="pref-2fa" name="require_2fa" :label="__('Require two-factor authentication')" :description="__('Enforce 2FA for every member.')" checked />
                        <x-ui.separator />
                        <x-ui.switch-field id="pref-public" name="public_workspace" :label="__('Public workspace')" :description="__('Allow anyone with the link to view.')" />
                    </x-ui.card.content>
                </x-ui.card>

                <div class="flex justify-end gap-4">
                    <x-ui.button type="reset" variant="outline">{{ __('Cancel') }}</x-ui.button>
                    <x-ui.button type="submit">{{ __('Save changes') }}</x-ui.button>
                </div>
            </form>
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add pages/settings-layout

Installs these dependencies automatically:

section container admin-page-header sidebar button card input label field separator switch-field

Registry contract

Install confidence

php artisan ui:add pages/settings-layout 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.0.3
License: open
Stability: stable
Contract: v1
Foundation: ≥ 1.0.0

Type	Generated target
blade	resources/views/pages/settings-layout.blade.php

Registry dependencies

section container admin-page-header sidebar button card input label field separator switch-field

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.

settings-layout.md

# Brok UI page: Settings Layout (`settings-layout`)

An organization settings screen: a page header, a section nav in the side column and grouped organization and preference forms in the main column.

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/settings-layout
```

## Render it

```blade
<x-pages.settings-layout />
```

## Use when

- An organization or workspace settings screen with a handful of sections reached from a side nav.
- A settings screen whose forms are grouped cards submitted together.

## Avoid when

- An account settings screen composed of the settings-* blocks behind anchored navigation; use settings-page.
- A single form with save blockers and a sticky record header; use admin-form.

## Rules

- Render the installed page with `<x-pages.settings-layout />` 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/settings-layout
- Registry JSON (files, props, contract): https://brokui.dev/r/open/pages/settings-layout.json

Ask about Settings Layout 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

An organization or workspace settings screen with a handful of sections reached from a side nav.
A settings screen whose forms are grouped cards submitted together.

Avoid when

An account settings screen composed of the settings-* blocks behind anchored navigation; use settings-page.
A single form with save blockers and a sticky record header; use admin-form.

Anti-patterns

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

Usage

Render the page as a component, or wire it to a route. Pass data where useful:

resources/views/welcome.blade.php Blade

<x-pages.settings-layout />

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.