Chart Blocks

Open source

Chart compositions on the chart-card shell: a KPI metric with a headline figure, a dual-axis column/line combo, a waterfall bridge and a grid of liquid gauges. One chart in a card is chart-card plus a chart example. Comparison instead frames a two-series bar chart in a tray, with a range select swapping the bundled dataset client-side.

Add to page builder

4 of 5

Trend Variant

resources/views/blocks/chart-gauge-grid.blade.php Blade

@props([
    'heading' => 'Resource usage',
    'subheading' => 'Live utilisation',
    'trend' => 'Healthy',
    'trendVariant' => 'neutral',
    'gauges' => null,
    'gaugeHeight' => 160,
])

@php
    // Each gauge: ['label' => , 'value' => 0..100, 'variant' => primary|success|warning].
    $gauges ??= [
        ['label' => __('Storage'), 'value' => 68, 'variant' => 'primary'],
        ['label' => __('Memory'), 'value' => 42, 'variant' => 'success'],
        ['label' => __('Quota'), 'value' => 91, 'variant' => 'warning'],
    ];
@endphp

<x-ui.chart-card
    :heading="$heading"
    :subheading="$subheading"
    :trend="$trend"
    :trend-variant="$trendVariant"
    {{ $attributes }}
>
    <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
        @foreach ($gauges as $gauge)
            <div class="flex flex-col items-center gap-4">
                <x-ui.chart-liquid
                    :value="$gauge['value']"
                    :variant="$gauge['variant'] ?? 'primary'"
                    :label="$gauge['label']"
                    :height="$gaugeHeight"
                />
                <span class="text-sm font-medium text-foreground">{{ $gauge['label'] }}</span>
            </div>
        @endforeach
    </div>
</x-ui.chart-card>

Installation

terminal

php artisan ui:add blocks/chart-gauge-grid

Installs these dependencies automatically:

chart-card chart-liquid

Registry contract

Install confidence

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

Type	Generated target
blade	resources/views/blocks/chart-gauge-grid.blade.php

Registry dependencies

chart-card chart-liquid

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.

chart-gauge-grid.md

# Brok UI block: Chart Gauge Grid (`chart-gauge-grid`)

A chart card holding a responsive row of liquid-fill gauges, each with its own value, tone and caption, for reading several utilisation levels at once.

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/chart-gauge-grid
```

## Render it

```blade
<x-blocks.chart-gauge-grid trend-variant="neutral" />
```

## Props

- `heading` (string, default `Resource usage`) — Card title.
- `subheading` (string, default `Live utilisation`) — Supporting description.
- `trend` (string|null, default `Healthy`) — Status badge.
- `trend-variant` (auto|success|destructive|neutral, default `neutral`) (variant) — Tone of the status badge.
- `gauges` (array|null, default `null`) — Rows of {label, value, variant}; null renders three sample gauges.
- `gauge-height` (int, default `160`) — Height of each gauge in pixels.

## Use when

- Several capacities are read side by side, such as storage, memory and quota.
- Each value is a percentage of its own limit rather than a share of one total.

## Avoid when

- One value is shown; compose chart-liquid inside a chart card.
- The values are parts of a single whole; use partition-bar.

## Rules

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

Ask about Chart Gauge Grid 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

Several capacities are read side by side, such as storage, memory and quota.
Each value is a percentage of its own limit rather than a share of one total.

Avoid when

One value is shown; compose chart-liquid inside a chart card.
The values are parts of a single whole; use partition-bar.

Anti-patterns

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

Anatomy: chart card trend badge gauge grid liquid gauge caption

Usage

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

resources/views/welcome.blade.php Blade

<x-blocks.chart-gauge-grid />

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.