Pricing

Open source

Pricing sections — from a simple three-tier table (with an optional billing-period toggle) to gradient and elevated cards, tinted and horizontal layouts, and a tabbed switcher.

Add to page builder

5 of 10

resources/views/blocks/pricing-gradient.blade.php Blade

@props([
    'heading' => 'Pricing that scales with you',
    'subheading' => 'Choose the plan that fits today and upgrade the moment you outgrow it. Every tier ships with the full component library.',
    'plans' => null,
])

@php
    $plans ??= [
        [
            'name' => 'Starter',
            'price' => 'Free',
            'period' => 'Forever',
            'blurb' => 'For solo builders shipping their first project.',
            'featured' => false,
            'cta' => 'Get Started',
            'href' => '#',
            'footnote' => 'No credit card required.',
            'features' => [
                '1 project',
                'Community support',
                'Core components',
                'Light & dark themes',
            ],
        ],
        [
            'name' => 'Pro',
            'price' => '$99',
            'period' => '/month',
            'blurb' => 'For growing teams shipping to production every week.',
            'featured' => true,
            'cta' => 'Get Started',
            'href' => '#',
            'footnote' => 'Billed monthly. Cancel anytime.',
            'features' => [
                'Unlimited projects',
                'Priority support',
                'All components & blocks',
                'Pro blocks & templates',
                'Team collaboration',
            ],
        ],
        [
            'name' => 'Enterprise',
            'price' => 'Custom',
            'period' => '',
            'blurb' => 'For organisations that need scale, control, and security.',
            'featured' => false,
            'cta' => 'Contact Sales',
            'href' => '#',
            'footnote' => 'Dedicated onboarding included.',
            'features' => [
                'Everything in Pro',
                'SSO & advanced roles',
                'Audit logs',
                'Dedicated SLA',
                'Named account manager',
            ],
        ],
    ];
@endphp

<x-ui.section
    data-slot="pricing-gradient"
    space="xl" {{ $attributes }}
>
    <x-ui.container gutter="sm">
        <x-ui.section-heading align="center" :title="$heading" :subtitle="$subheading" />

        <div class="mx-auto mt-12 grid max-w-md grid-cols-1 items-center gap-6 sm:max-w-none sm:mt-16 lg:grid-cols-3">
            @foreach ($plans as $plan)
                @php
                    $featured = $plan['featured'] ?? false;
                    $cta = $plan['cta'] ?? __('Get Started');
                    $href = $plan['href'] ?? '#';
                @endphp

                @if ($featured)
                    {{-- Featured plan: gradient border via wrapper trick (outer gradient pad + inner card surface). --}}
                    <div class="relative rounded-lg bg-gradient-to-br from-primary to-accent p-0.5 shadow-lg lg:scale-105">
                        <x-ui.badge class="absolute -top-3 start-1/2 z-10 -translate-x-1/2 shadow-sm rtl:translate-x-1/2">
                            {{ __('Most Popular') }}
                        </x-ui.badge>

                        <div class="relative flex h-full flex-col overflow-hidden rounded-[calc(1rem-2px)] bg-card p-6 text-card-foreground">
                            {{-- Decorative cursor accent anchored to the bottom-end corner. --}}
                            <svg
                                class="pointer-events-none absolute bottom-4 end-4 size-12 text-primary/40"
                                viewBox="0 0 24 24"
                                fill="currentColor"
                                aria-hidden="true"
                            >
                                <path d="M5 3l14 7.5-6.1 1.7L9.7 19 5 3z" />
                            </svg>

                            <div>
                                <h3 class="text-lg font-semibold">{{ __($plan['name']) }}</h3>

                                <div class="mt-4 flex items-baseline gap-2">
                                    <span class="text-3xl font-bold tracking-tight">{{ $plan['price'] }}</span>
                                    @if (! empty($plan['period']))
                                        <span class="text-sm text-muted-foreground">{{ __($plan['period']) }}</span>
                                    @endif
                                </div>

                                @if (! empty($plan['blurb']))
                                    <p class="mt-4 text-sm text-muted-foreground">{{ __($plan['blurb']) }}</p>
                                @endif
                            </div>

                            <x-ui.separator class="my-6" />

                            <x-ui.check-list class="flex-1">
                                @foreach ($plan['features'] as $feature)
                                    <x-ui.check-list.item>{{ __($feature) }}</x-ui.check-list.item>
                                @endforeach
                            </x-ui.check-list>

                            <div class="mt-6">
                                <x-ui.button :href="$href" variant="default" class="w-full block">{{ __($cta) }}</x-ui.button>

                                @if (! empty($plan['footnote']))
                                    <p class="mt-4 text-center text-sm text-muted-foreground">{{ __($plan['footnote']) }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                @else
                    {{-- Side plans: ring-bordered card. --}}
                    <x-ui.card class="relative flex h-full flex-col rounded-lg ring-1 ring-border">
                        <x-ui.card.header>
                            <x-ui.card.title class="text-lg">{{ __($plan['name']) }}</x-ui.card.title>

                            <div class="mt-4 flex items-baseline gap-2">
                                <span class="text-3xl font-bold tracking-tight">{{ $plan['price'] }}</span>
                                @if (! empty($plan['period']))
                                    <span class="text-sm text-muted-foreground">{{ __($plan['period']) }}</span>
                                @endif
                            </div>

                            @if (! empty($plan['blurb']))
                                <p class="mt-4 text-sm text-muted-foreground">{{ __($plan['blurb']) }}</p>
                            @endif
                        </x-ui.card.header>

                        <x-ui.card.content class="flex flex-1 flex-col gap-6">
                            <x-ui.separator />

                            <x-ui.check-list class="flex-1">
                                @foreach ($plan['features'] as $feature)
                                    <x-ui.check-list.item>{{ __($feature) }}</x-ui.check-list.item>
                                @endforeach
                            </x-ui.check-list>
                        </x-ui.card.content>

                        <x-ui.card.footer class="flex-col items-stretch gap-4">
                            <x-ui.button :href="$href" variant="outline" class="w-full block">{{ __($cta) }}</x-ui.button>

                            @if (! empty($plan['footnote']))
                                <p class="text-center text-sm text-muted-foreground">{{ __($plan['footnote']) }}</p>
                            @endif
                        </x-ui.card.footer>
                    </x-ui.card>
                @endif
            @endforeach
        </div>
    </x-ui.container>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/pricing-gradient

Installs these dependencies automatically:

badge button card check-list container section section-heading separator

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/pricing-gradient.blade.php

Registry dependencies

badge button card check-list container section section-heading separator

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.

pricing-gradient.md

# Brok UI block: Pricing Gradient (`pricing-gradient`)

Three-tier pricing with a gradient-bordered featured plan, a Most Popular badge, a decorative cursor accent, ring-bordered side plans, check-bulleted features, and a full-width CTA per plan.

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/pricing-gradient
```

## Render it

```blade
<x-blocks.pricing-gradient />
```

## Props

- `heading` (string, default `Pricing that scales with you`) — Section headline.
- `subheading` (string, default `Choose the plan that fits today and upgrade the moment you outgrow it. Every tier ships with the full component library.`) — Supporting copy under the heading.
- `plans` (mixed|null, default `null`) — Array of plan cards ({name, price, period, blurb, featured, cta, href, footnote, features}); null falls back to sample plans.

## Use when

- Presenting three tiers with a decorative gradient-bordered featured plan and a cursor accent for visual emphasis.
- Wanting the featured plan more visually elevated than a plain ring highlight, with ring-bordered side plans.

## Avoid when

- Wanting a plainer, unstyled card grid (pricing-cards) or an asymmetric elevated/framed layout (pricing-elevated).
- Needing a monthly/annual billing switch or tinted cards with a per-plan badge and credits row; use pricing-tinted. This block has no billing toggle and wraps only the featured plan in a gradient border.

## Rules

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

Ask about Pricing Gradient 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

Presenting three tiers with a decorative gradient-bordered featured plan and a cursor accent for visual emphasis.
Wanting the featured plan more visually elevated than a plain ring highlight, with ring-bordered side plans.

Avoid when

Wanting a plainer, unstyled card grid (pricing-cards) or an asymmetric elevated/framed layout (pricing-elevated).
Needing a monthly/annual billing switch or tinted cards with a per-plan badge and credits row; use pricing-tinted. This block has no billing toggle and wraps only the featured plan in a gradient border.

Anti-patterns

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

Anatomy: section heading featured plan with gradient border decorative cursor accent ring-bordered side plans feature checklist full-width cta per plan

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.pricing-gradient />

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.