Comparison

Open source

Comparison sections — a two-column us-vs-them layout contrasting your product with the alternative, and feature-comparison tables across your own plans or against competitors.

Add to page builder

4 of 5

resources/views/blocks/comparison-toggle.blade.php Blade

@props([
    'heading' => 'See how we compare',
    'subheading' => 'Pick what you are weighing us against — the comparison updates instantly.',
    'yourBrand' => 'Acme',
    'competitors' => null,
    'rows' => null,
])

@php
    // Labels for the competitor switcher. Index 0 maps to the first per-row "them" value.
    $competitors ??= [
        'Competitor A',
        'Competitor B',
        'Spreadsheets',
    ];

    // Each row: 'label' = capability, 'us' = your value, 'them' = one value per competitor
    // (same order as $competitors). A boolean renders a check (true) / cross (false);
    // a string renders verbatim.
    $rows ??= [
        ['label' => 'Set up in minutes',        'us' => true,  'them' => [true,  false, false]],
        ['label' => 'No per-seat pricing',      'us' => true,  'them' => [false, true,  true]],
        ['label' => 'Real-time collaboration',  'us' => true,  'them' => [true,  true,  false]],
        ['label' => 'Automations & workflows',  'us' => true,  'them' => [false, true,  false]],
        ['label' => 'Audit logging',            'us' => true,  'them' => [true,  false, false]],
        ['label' => 'Single sign-on (SSO)',     'us' => true,  'them' => [false, false, false]],
        ['label' => 'Open data export',         'us' => true,  'them' => [true,  true,  true]],
        ['label' => 'Migration assistance',     'us' => true,  'them' => [false, true,  false]],
    ];
@endphp

<x-ui.section
    data-slot="comparison-04"
    aria-labelledby="ctg01-heading"
    x-data="{ active: 0 }"
    space="xl" {{ $attributes }}
>
    <x-ui.container size="md" gutter="sm">
        <div class="mx-auto max-w-2xl text-center">
            <h2 id="ctg01-heading" class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            @if ($subheading)
                <p class="mt-4 text-pretty text-base text-muted-foreground sm:text-lg">{{ __($subheading) }}</p>
            @endif
        </div>

        {{-- Competitor switcher: real buttons exposed as a tablist. --}}
        <div role="tablist" aria-label="{{ __('Choose a competitor to compare against') }}" class="mt-10 flex flex-wrap justify-center gap-2">
            @foreach ($competitors as $ci => $competitor)
                <x-ui.button
                    type="button"
                    size="sm"
                    variant="outline"
                    role="tab"
                    :id="'ctg01-tab-' . $ci"
                    aria-controls="ctg01-panel"
                    x-bind:class="active === {{ $ci }} ? 'border-primary bg-primary/10 text-primary' : ''"
                    x-bind:aria-selected="active === {{ $ci }} ? 'true' : 'false'"
                    x-bind:tabindex="active === {{ $ci }} ? '0' : '-1'"
                    x-on:click="active = {{ $ci }}"
                >
                    {{ __('vs :name', ['name' => __($competitor)]) }}
                </x-ui.button>
            @endforeach
        </div>

        {{-- Two-column comparison: fixed "Us" + a switching "Them" column. --}}
        <div id="ctg01-panel" role="tabpanel" x-bind:aria-labelledby="'ctg01-tab-' + active" class="mt-8 overflow-x-auto rounded-lg border border-border shadow-sm">
            <x-ui.table class="min-w-[34rem] border-separate border-spacing-0">
                <caption class="sr-only">
                    {{ __('Capability comparison: :brand versus the selected alternative', ['brand' => __($yourBrand)]) }}
                </caption>

                <x-ui.table.header>
                    <x-ui.table.row class="hover:bg-transparent">
                        <x-ui.table.head scope="col" class="w-1/2 text-sm font-semibold text-foreground">
                            {{ __('Capability') }}
                        </x-ui.table.head>

                        <x-ui.table.head scope="col" class="w-1/4 bg-primary/5 text-center">
                            <span class="flex flex-col items-center gap-2">
                                <span class="text-sm font-semibold text-foreground">{{ __($yourBrand) }}</span>
                                <x-ui.badge size="sm">{{ __('Recommended') }}</x-ui.badge>
                            </span>
                        </x-ui.table.head>

                        <x-ui.table.head scope="col" class="w-1/4 text-center text-sm font-semibold text-muted-foreground">
                            @foreach ($competitors as $ci => $competitor)
                                <span x-show="active === {{ $ci }}" @if ($ci !== 0) x-cloak @endif>{{ __($competitor) }}</span>
                            @endforeach
                        </x-ui.table.head>
                    </x-ui.table.row>
                </x-ui.table.header>

                <x-ui.table.body>
                    @foreach ($rows as $row)
                        <x-ui.table.row class="hover:bg-transparent">
                            <x-ui.table.head scope="row" class="text-sm font-medium text-foreground">
                                {{ __($row['label']) }}
                            </x-ui.table.head>

                            {{-- Us: always a check, highlighted column. --}}
                            <x-ui.table.cell class="bg-primary/5 text-center">
                                <svg class="mx-auto size-5 text-success" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 011.4-1.4l3.3 3.29 6.8-6.8a1 1 0 011.4 0z" clip-rule="evenodd" />
                                </svg>
                                <span class="sr-only">{{ __('Included') }}</span>
                            </x-ui.table.cell>

                            {{-- Them: every competitor's mark pre-rendered, toggled by visibility. --}}
                            <x-ui.table.cell class="text-center">
                                @foreach ($competitors as $ci => $competitor)
                                    @php $value = $row['them'][$ci] ?? false; @endphp
                                    <span x-show="active === {{ $ci }}" @if ($ci !== 0) x-cloak @endif>
                                        @if (is_string($value))
                                            <span class="text-sm text-foreground">{{ __($value) }}</span>
                                        @elseif ($value === true)
                                            <svg class="mx-auto size-5 text-success" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd" d="M16.7 5.3a1 1 0 010 1.4l-7.5 7.5a1 1 0 01-1.4 0L3.3 9.7a1 1 0 011.4-1.4l3.3 3.29 6.8-6.8a1 1 0 011.4 0z" clip-rule="evenodd" />
                                            </svg>
                                            <span class="sr-only">{{ __('Included') }}</span>
                                        @else
                                            <svg class="mx-auto size-5 text-destructive" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
                                                <path d="M6 6l8 8M14 6l-8 8" />
                                            </svg>
                                            <span class="sr-only">{{ __('Not included') }}</span>
                                        @endif
                                    </span>
                                @endforeach
                            </x-ui.table.cell>
                        </x-ui.table.row>
                    @endforeach
                </x-ui.table.body>
            </x-ui.table>
        </div>

        <p class="mt-4 text-center text-sm text-muted-foreground">{{ __('Competitor data is sourced from public information and may not reflect recent changes.') }}</p>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/comparison-toggle

Installs these dependencies automatically:

badge button container section table

Registry contract

Install confidence

php artisan ui:add blocks/comparison-toggle 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/comparison-toggle.blade.php

Registry dependencies

badge button container section table

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.

comparison-toggle.md

# Brok UI block: Comparison Toggle (`comparison-toggle`)

A competitor switcher comparison: the visitor picks which alternative to compare against via a tablist of buttons, and the live two-column table swaps its 'them' column — a highlighted, always-winning 'Us' column versus per-competitor check/cross marks toggled client-side, all pre-rendered server-side.

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/comparison-toggle
```

## Render it

```blade
<x-blocks.comparison-toggle />
```

## Props

- `heading` (string, default `See how we compare`)
- `subheading` (string, default `Pick what you are weighing us against — the comparison updates instantly.`)
- `your-brand` (string, default `Acme`)
- `competitors` (mixed|null, default `null`)
- `rows` (mixed|null, default `null`)

## Use when

- Letting a visitor pick which of several competitors to compare against via a tablist, with the table's 'them' column swapping live.
- Keeping your own column always highlighted and winning while only the competitor column changes.

## Avoid when

- Use comparison-competitor-table for a static table showing every competitor at once instead of a one-at-a-time switcher.

## Rules

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

Ask about Comparison Toggle 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

Letting a visitor pick which of several competitors to compare against via a tablist, with the table's 'them' column swapping live.
Keeping your own column always highlighted and winning while only the competitor column changes.

Avoid when

Use comparison-competitor-table for a static table showing every competitor at once instead of a one-at-a-time switcher.

Anti-patterns

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

Anatomy: root comparison-04

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.comparison-toggle />

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.