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

1 of 5

Tone

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

@props([
    'eyebrow'       => 'Why choose us',
    'heading'       => 'A smarter way to work',
    'lead'          => 'See how Acme stacks up against the old way of doing things.',
    'ourTitle'      => 'With Acme',
    'ourSubtitle'   => 'The modern, all-in-one platform built for teams who move fast.',
    'ourCta'        => 'Get started',
    'ourCtaHref'    => '#',
    'theirTitle'    => 'The old way',
    'theirSubtitle' => 'Stitching together tools, spreadsheets, and manual effort.',
    'badgeLabel'    => 'Recommended',
    'ourFeatures'   => null,
    'theirFeatures' => null,
    'closing'       => null,
    'tone'          => 'brand',
])

@php
    $ourFeatures ??= [
        'Automated workflows from day one',
        'Real-time collaboration across your team',
        'One-click integrations with 200+ apps',
        'Instant, searchable audit trail',
        '24/7 support with a 1-hour response SLA',
        'Scales from 1 to 10,000 users seamlessly',
    ];

    $theirFeatures ??= [
        'Manual, error-prone processes',
        'Siloed tools and endless email threads',
        'Custom-coded integrations that break',
        'No activity history or accountability',
        'Business-hours support with 48h wait times',
        'Re-architecting required as you grow',
    ];

    $semantic = $tone === 'semantic';
@endphp

<x-ui.section data-slot="comparison-01" space="xl" {{ $attributes }}>
    <div class="mx-auto max-w-5xl px-4">
        <div class="mx-auto mb-12 max-w-2xl text-center">
            @if ($eyebrow)
                <p class="mb-4 text-sm font-semibold uppercase tracking-widest text-primary">{{ __($eyebrow) }}</p>
            @endif
            <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">{{ __($heading) }}</h2>
            <p class="mt-4 text-xl text-muted-foreground">{{ __($lead) }}</p>
        </div>

        <div class="mx-auto grid max-w-4xl grid-cols-1 items-stretch gap-6 md:grid-cols-2">
            <x-ui.card @class([
                'flex h-full flex-col',
                'border-success/40 ring-1 ring-success/30' => $semantic,
                'border-primary ring-1 ring-primary' => ! $semantic,
            ])>
                <x-ui.card.header @class(['border-b border-success/20 bg-success/10' => $semantic])>
                    <div class="mb-2">
                        <x-ui.badge :variant="$semantic ? 'success' : 'default'">{{ __($badgeLabel) }}</x-ui.badge>
                    </div>
                    <x-ui.card.title @class(['text-xl font-bold', 'text-success' => $semantic])>{{ __($ourTitle) }}</x-ui.card.title>
                    <x-ui.card.description>{{ __($ourSubtitle) }}</x-ui.card.description>
                </x-ui.card.header>

                <x-ui.card.content @class(['flex-1', 'pt-6' => $semantic])>
                    <x-ui.check-list marker="chip" :tone="$semantic ? 'success' : 'primary'">
                        @foreach ($ourFeatures as $feature)
                            <x-ui.check-list.item>{{ __($feature) }}</x-ui.check-list.item>
                        @endforeach
                    </x-ui.check-list>
                </x-ui.card.content>

                @if ($ourCta)
                    <x-ui.card.footer>
                        <x-ui.button variant="default" :href="$ourCtaHref" :with-arrow="true" class="w-full justify-center">{{ __($ourCta) }}</x-ui.button>
                    </x-ui.card.footer>
                @endif
            </x-ui.card>

            <x-ui.card class="flex h-full flex-col border-border bg-muted/30">
                <x-ui.card.header @class(['border-b border-border bg-destructive/10' => $semantic])>
                    <div class="mb-2 h-6" aria-hidden="true"></div>
                    <x-ui.card.title class="text-xl font-bold text-muted-foreground">{{ __($theirTitle) }}</x-ui.card.title>
                    <x-ui.card.description>{{ __($theirSubtitle) }}</x-ui.card.description>
                </x-ui.card.header>

                <x-ui.card.content @class(['flex-1', 'pt-6' => $semantic])>
                    <x-ui.check-list marker="chip" icon="cross" :tone="$semantic ? 'destructive' : 'muted'" class="text-muted-foreground">
                        @foreach ($theirFeatures as $feature)
                            <x-ui.check-list.item>{{ __($feature) }}</x-ui.check-list.item>
                        @endforeach
                    </x-ui.check-list>
                </x-ui.card.content>

                @if ($ourCta)
                    <x-ui.card.footer>
                        <x-ui.button variant="outline" class="w-full justify-center opacity-60" disabled>{{ __('Not recommended') }}</x-ui.button>
                    </x-ui.card.footer>
                @endif
            </x-ui.card>
        </div>

        @if ($closing)
            <p class="mx-auto mt-10 max-w-2xl text-center text-sm text-muted-foreground">{{ __($closing) }}</p>
        @endif
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/comparison-versus

Installs these dependencies automatically:

badge button card check-list section

Registry contract

Install confidence

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

Registry dependencies

badge button card check-list section

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-versus.md

# Brok UI block: Comparison Vs (`comparison-versus`)

A two-column us-vs-them comparison with a highlighted recommended card of checked benefits beside a muted alternative card of crossed-out drawbacks, in a brand or success/destructive semantic tone, with an optional closing line and optional CTA footers.

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-versus
```

## Render it

```blade
<x-blocks.comparison-versus tone="brand" />
```

## Props

- `tone` (brand|semantic, default `brand`) (variant) — brand tints the recommended card with primary/muted; semantic tints it success (pros) versus destructive (cons), with extra header padding.

## Use when

- Contrasting your product against a generic alternative with a highlighted checked-benefits card beside a muted crossed-out-drawbacks card.
- Choosing a brand or semantic (success/destructive) tone for the two cards via the tone prop.

## Avoid when

- Use comparison-competitor-table for a full feature table against named competitors, or comparison-checklist for a single-card checklist comparison.

## Rules

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

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

Contrasting your product against a generic alternative with a highlighted checked-benefits card beside a muted crossed-out-drawbacks card.
Choosing a brand or semantic (success/destructive) tone for the two cards via the tone prop.

Avoid when

Use comparison-competitor-table for a full feature table against named competitors, or comparison-checklist for a single-card checklist comparison.

Anti-patterns

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

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.comparison-versus />

The controls above the preview are props on this composition. What you picked reads:

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.