Settings

Open source

Account settings screens — a grouped account form, a notification-preferences matrix and a connected-apps integrations list.

Add to page builder

2 of 6

resources/views/blocks/settings-notifications.blade.php Blade

@props([
    'heading' => 'Notifications',
    'subheading' => 'Choose how you want to be notified across each channel.',
    'action' => '#',
    'channels' => null,
    'groups' => null,
])

@php
    $channels ??= [
        ['key' => 'email', 'label' => 'Email'],
        ['key' => 'push', 'label' => 'Push'],
        ['key' => 'sms', 'label' => 'SMS'],
    ];

    $groups ??= [
        [
            'legend' => 'Account activity',
            'description' => 'Critical updates about your account and its security.',
            'rows' => [
                [
                    'name' => 'sign_in',
                    'label' => 'New sign-ins',
                    'help' => 'Alert me when a new device signs into my account.',
                    'channels' => ['email' => true, 'push' => true, 'sms' => true],
                ],
                [
                    'name' => 'password',
                    'label' => 'Password changes',
                    'help' => 'Notify me whenever my password is updated.',
                    'channels' => ['email' => true, 'push' => false, 'sms' => true],
                ],
                [
                    'name' => 'billing',
                    'label' => 'Billing & receipts',
                    'help' => 'Receive invoices and payment confirmations.',
                    'channels' => ['email' => true, 'push' => false, 'sms' => false],
                ],
            ],
        ],
        [
            'legend' => 'Recommendations',
            'description' => 'Personalized suggestions based on your usage.',
            'rows' => [
                [
                    'name' => 'weekly_digest',
                    'label' => 'Weekly digest',
                    'help' => 'A summary of activity and tips from the past week.',
                    'channels' => ['email' => true, 'push' => false, 'sms' => false],
                ],
                [
                    'name' => 'mentions',
                    'label' => 'Mentions & replies',
                    'help' => 'When someone mentions or replies to you.',
                    'channels' => ['email' => false, 'push' => true, 'sms' => false],
                ],
                [
                    'name' => 'reminders',
                    'label' => 'Task reminders',
                    'help' => 'Nudges for upcoming due dates and follow-ups.',
                    'channels' => ['email' => false, 'push' => true, 'sms' => false],
                ],
            ],
        ],
        [
            'legend' => 'Product news',
            'description' => 'Updates about new features and the occasional offer.',
            'rows' => [
                [
                    'name' => 'feature_updates',
                    'label' => 'Feature releases',
                    'help' => 'Be the first to hear about new capabilities.',
                    'channels' => ['email' => true, 'push' => false, 'sms' => false],
                ],
                [
                    'name' => 'newsletter',
                    'label' => 'Newsletter',
                    'help' => 'Stories, best practices, and product tips.',
                    'channels' => ['email' => false, 'push' => false, 'sms' => false],
                ],
                [
                    'name' => 'offers',
                    'label' => 'Special offers',
                    'help' => 'Occasional promotions and discounts from Acme Inc.',
                    'channels' => ['email' => false, 'push' => false, 'sms' => false],
                ],
            ],
        ],
    ];
@endphp

<x-ui.section
    aria-labelledby="settings-notifications-01-heading"
    data-slot="settings-02"
    space="xl" {{ $attributes }}
>
    <div class="mx-auto max-w-3xl px-4">
        <form method="POST" action="{{ $action }}">
            @csrf

            <x-ui.card>
                <x-ui.card.header>
                    <h2 id="settings-notifications-01-heading" class="text-lg font-semibold leading-none tracking-tight">{{ __($heading) }}</h2>
                    <x-ui.card.description>{{ __($subheading) }}</x-ui.card.description>
                </x-ui.card.header>

                <x-ui.card.content class="space-y-10">
                    {{-- Channel header row --}}
                    <div class="hidden items-center gap-4 border-b border-border pb-4 sm:flex">
                        <p class="flex-1 text-sm font-medium text-muted-foreground">{{ __('Preference') }}</p>
                        <div class="flex shrink-0 items-center gap-4" aria-hidden="true">
                            @foreach ($channels as $channel)
                                <span class="w-11 text-center text-sm font-semibold uppercase tracking-wide text-muted-foreground">{{ __($channel['label']) }}</span>
                            @endforeach
                        </div>
                    </div>

                    @foreach ($groups as $group)
                        <fieldset class="space-y-6">
                            <legend class="mb-2">
                                <span class="block text-base font-semibold leading-none text-foreground">{{ __($group['legend']) }}</span>
                                <span class="mt-2 block text-sm text-muted-foreground">{{ __($group['description']) }}</span>
                            </legend>

                            <ul class="space-y-6">
                                @foreach ($group['rows'] as $i => $row)
                                    @if ($i > 0)
                                        <li aria-hidden="true"><x-ui.separator /></li>
                                    @endif
                                    <li class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                                        <div class="flex-1 space-y-2">
                                            <x-ui.label :for="$row['name'].'-'.$channels[0]['key']">{{ __($row['label']) }}</x-ui.label>
                                            <p class="text-sm text-muted-foreground">{{ __($row['help']) }}</p>
                                        </div>

                                        <div class="flex shrink-0 items-center gap-4">
                                            @foreach ($channels as $channel)
                                                <div class="flex w-11 flex-col items-center gap-2">
                                                    <span class="text-sm font-medium text-muted-foreground sm:sr-only">{{ __($channel['label']) }}</span>
                                                    <x-ui.switch
                                                        :id="$row['name'].'-'.$channel['key']"
                                                        :name="'notifications['.$row['name'].']['.$channel['key'].']'"
                                                        value="1"
                                                        :checked="(bool) ($row['channels'][$channel['key']] ?? false)"
                                                        :aria-label="__($row['label']).' — '.__($channel['label'])"
                                                    />
                                                </div>
                                            @endforeach
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </fieldset>
                    @endforeach
                </x-ui.card.content>

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

Installation

terminal

php artisan ui:add blocks/settings-notifications

Installs these dependencies automatically:

button card label section separator switch

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/settings-notifications.blade.php

Registry dependencies

button card label section separator switch

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.

settings-notifications.md

# Brok UI block: Settings Notifications (`settings-notifications`)

A notification-preferences settings card with grouped fieldsets, a channel header row, and per-preference Email/Push/SMS switch toggles.

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

## Render it

```blade
<x-blocks.settings-notifications />
```

## Props

- `heading` (string, default `Notifications`) — Section heading.
- `subheading` (string, default `Choose how you want to be notified across each channel.`) — Supporting copy under the heading.
- `action` (string, default `#`) — Form submission endpoint.
- `channels` (mixed|null, default `null`) — Channel column definitions ({key, label}); null falls back to Email/Push/SMS.
- `groups` (mixed|null, default `null`) — Fieldset groups, each with a legend, description and per-channel rows; null falls back to sample data.

## Use when

- Managing notification preferences across grouped categories with per-channel Email, Push and SMS switches.
- Needing channel-level granularity rather than a single on/off toggle per notification.

## Avoid when

- Needing general profile fields alongside notifications; use settings-account instead.

## Rules

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

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

Managing notification preferences across grouped categories with per-channel Email, Push and SMS switches.
Needing channel-level granularity rather than a single on/off toggle per notification.

Avoid when

Needing general profile fields alongside notifications; use settings-account instead.

Anti-patterns

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

Anatomy: root settings-02

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.settings-notifications />

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.