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

4 of 10

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

@props([
    'badge' => 'Best value',
    'name' => 'Lifetime access',
    'description' => 'One payment, yours forever. Every component, block, and future update — no subscription, no seats, no surprises.',
    'price' => '$299',
    'period' => '/once',
    'cta' => 'Get lifetime access',
    'href' => '#',
    'guarantee' => '30-day money-back guarantee',
    'features' => null,
])

@php
    $features ??= [
        'All 200+ components and blocks',
        'Unlimited projects, forever',
        'Lifetime updates and new releases',
        'Priority support and onboarding',
        'Commercial license included',
    ];
@endphp

<x-ui.section space="xl" {{ $attributes }}>
    <div class="mx-auto max-w-lg px-4">
        <x-ui.card class="overflow-hidden">
            <div class="flex flex-col gap-6 p-6 sm:p-8">
                <div class="flex items-start justify-between gap-4">
                    <x-ui.card.title class="text-2xl font-bold tracking-tight">{{ __($name) }}</x-ui.card.title>
                    @if ($badge)
                        <x-ui.badge class="shrink-0">{{ __($badge) }}</x-ui.badge>
                    @endif
                </div>

                <p class="text-pretty text-muted-foreground">{{ __($description) }}</p>

                <x-ui.check-list>
                    @foreach ($features as $feature)
                        <x-ui.check-list.item>{{ __($feature) }}</x-ui.check-list.item>
                    @endforeach
                </x-ui.check-list>
            </div>

            <x-ui.separator />

            <div class="flex flex-col gap-6 bg-muted/40 p-6 sm:p-8">
                <div class="flex items-baseline gap-2">
                    <span class="text-5xl font-bold tracking-tight">{{ $price }}</span>
                    <span class="text-sm text-muted-foreground">{{ __($period) }}</span>
                </div>

                <x-ui.button :href="$href" size="lg" class="w-full block">{{ __($cta) }}</x-ui.button>

                <p class="flex items-center justify-center gap-2 text-sm text-muted-foreground">
                    <svg class="size-4 shrink-0 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
                        <path d="m9 12 2 2 4-4" />
                    </svg>
                    <span>{{ __($guarantee) }}</span>
                </p>
            </div>
        </x-ui.card>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/pricing-single

Installs these dependencies automatically:

badge button card check-list section separator

Registry contract

Install confidence

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

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

Registry dependencies

badge button card check-list section 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-single.md

# Brok UI block: Pricing Single (`pricing-single`)

A centered single-plan pricing card with a features checklist above a muted price panel, a full-width CTA, a Best value badge, and a money-back guarantee line.

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

## Render it

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

## Props

- `badge` (string, default `Best value`) — Badge label shown above the plan name.
- `name` (string, default `Lifetime access`) — Plan name/title.
- `description` (string, default `One payment, yours forever. Every component, block, and future update — no subscription, no seats, no surprises.`) — Supporting copy under the plan name.
- `price` (string, default `$299`) — Price amount shown in the price panel.
- `period` (string, default `/once`) — Billing period suffix shown after the price.
- `cta` (string, default `Get lifetime access`) — Full-width CTA button label.
- `href` (string, default `#`) — CTA button destination.
- `guarantee` (string, default `30-day money-back guarantee`) — Guarantee line shown under the CTA.
- `features` (mixed|null, default `null`) — Array of feature strings rendered in the checklist; null falls back to sample features.

## Use when

- Selling a single plan, such as a lifetime-access or one-time-payment offer, as one centered card.
- Pairing a features checklist with a muted price panel, a Best value badge and a money-back guarantee line.

## Avoid when

- Comparing multiple plans side by side; use pricing-cards, comparison-plans-table, or another multi-tier pricing block.

## Rules

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

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

Selling a single plan, such as a lifetime-access or one-time-payment offer, as one centered card.
Pairing a features checklist with a muted price panel, a Best value badge and a money-back guarantee line.

Avoid when

Comparing multiple plans side by side; use pricing-cards, comparison-plans-table, or another multi-tier pricing block.

Anti-patterns

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

Anatomy: badge plan name/description features checklist price panel full-width cta guarantee line

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.pricing-single />

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.