Dashboards / Structure / Semantic grouping

Semantic grouping

Panels belong together by meaning, and the layout should say so.

Updated September 10, 2026

Problem

A dashboard has twenty panels arranged in the order somebody added them. Two panels that describe the same subsystem sit six rows apart, and a panel about payments sits next to one about disk latency because both were built on a Tuesday.

Solution

Group panels by what they mean, label the groups, and let adjacency carry information. Everything about one service together; everything about one stage of a pipeline together; everything one role cares about together.

The reason this matters more on a dashboard than on most pages is that people do not read dashboards, they scan them. Scanning uses proximity: things near each other are assumed related, whether or not anyone intended it. That assumption is made before any label is read, which means an ungrouped layout is not neutral. It is actively making false claims.

The hard part is choosing the axis, because there are usually three defensible ones and they conflict.

By subsystem—database, cache, queue, web—suits people who own components and matches how incidents are usually scoped.

By signal type—traffic, errors, latency, saturation—suits people diagnosing, and puts comparable panels next to each other so a shared shape is visible.

By audience—what the on-call needs, what the product owner needs—suits pages read by more than one role, and tends to produce duplication.

Picking one and applying it consistently beats a page that groups by subsystem at the top and signal type further down, which is the state most mature dashboards drift into as different people add sections.

Group labels are the visible output and they get written last, which is why they are so often nouns with no information: “Metrics”, “Other”, “Misc”. A group called “Misc” is a confession that the grouping is unfinished.

Use when

The panel count is beyond a handful, the content has real structure, and viewers scan rather than read top to bottom.

Don’t use when

There are six panels. Grouping six things into three groups adds ceremony and reduces the information density of every label.

Trade-offs

Any grouping privileges one question over the others, so the page is fast for the question it was arranged around and slower for every other. Groups resist change: once a section exists, panels get added to whichever one looks closest rather than prompting a rethink. Consistency across a dashboard estate is nearly impossible to maintain without a template, and inconsistent grouping across pages costs more than no grouping. And a grouped layout usually implies collapsing, which brings its own set of problems.

Checklist

What is the grouping axis, and is it applied consistently down the whole page?
Would a different axis serve the primary reader better?
Does every group have a label that says something specific?
Is there a group called Misc, Other or Metrics?
Does proximity anywhere imply a relationship that does not exist?
Are groups ordered by importance, or by when they were added?
Do the same groups appear in the same order across related dashboards?
Does a new panel have an obvious home, or does it default to the last group?
Are group boundaries visible without relying on colour?
Does the grouping still make sense after the last reorganisation?

Compare

Grafana provides rows as the grouping mechanism, so a group is a labelled collapsible band, and the label is the only thing carrying the semantics. Datadog offers group widgets that nest within a page and can carry their own status, so a group is an object with state rather than only a divider. Netdata derives grouping from the collectors themselves—CPU, memory, disks, network, per application—which means the structure is generated rather than curated and is consistent across every node by construction. Honeycomb has little of this, because a board is a set of queries rather than a spatial arrangement, and the grouping question moves to which queries belong on which board.

Panel grid is the mechanism adjacency is expressed through. Collapsible row is what a group usually becomes. Tabs as genres is the same idea promoted to page level. Multi-page dashboard is where grouping goes when sections outgrow one page. Dense small-multiple layout is the case where grouping matters most, because scanning is the only way the page works.

Wireframe — the pattern's anatomy, not any one product's version of it

Implementation

Panels that belong together by meaning, laid out so the grouping is visible without a box around everything. A heading and a gap do more work than a border, and cost less ink.

shadcn: npx shadcn@latest add separator card
Tokens: --card--muted-foreground--border--status-warn--status-critical

LightDarkCode

Traffic

Requests / s

1,240

Active sessions

8,912

Egress

210 MB/s

Errors

5xx rate

0.21%

4xx rate

2.4%

Failed jobs

Saturation

CPU

61%

Memory

78%

Queue depth

PanelGroups.tsxOne grouping axis per page, a labelled section per group, and a label that says nothing gets flagged.

import type { ReactNode } from "react";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

/** One axis per page. Subsystem, signal type or audience, chosen once, so a
 *  page cannot group by service at the top and by signal further down. */
export type Axis = "subsystem" | "signal" | "audience";

export type Group = {
  /** Specific. "Misc", "Other" and "Metrics" are confessions, and they are
   *  flagged rather than silently accepted. */
  label: string;
  /** Ordered by importance, never by when they were added. */
  panels: ReactNode[];
};

type Props = {
  axis: Axis;
  groups: Group[];
  columns?: 2 | 3 | 4;
};

const SAYS_NOTHING = /^(misc|miscellaneous|other|metrics|general|stuff)$/i;
const COLS = { 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4" };

export function PanelGroups({ axis, groups, columns = 3 }: Props) {
  return (
    <div className="flex flex-col gap-5" data-axis={axis}>
      {groups.map((g) => {
        const empty = SAYS_NOTHING.test(g.label.trim());
        return (
          // A heading and a gap do the work. No box around everything, and
          // the boundary is visible without colour.
          <section key={g.label} aria-label={g.label}>
            <h3
              className={cn("text-[11px] uppercase tracking-[0.1em]", empty ? "text-status-warn" : "text-muted-foreground")}
              title={empty ? `"${g.label}" says nothing about what is inside. Name the ${axis}.` : undefined}
            >
              {g.label}
            </h3>
            <Separator className="mb-2 mt-1.5" />
            {g.panels.length > 0 ? (
              <div className={cn("grid gap-2", COLS[columns])}>{g.panels}</div>
            ) : (
              <p className="text-[11px] text-muted-foreground">Nothing here yet.</p>
            )}
          </section>
        );
      })}
    </div>
  );
}

demo.tsxHow it is called: nine panels by signal type, traffic then errors then saturation.

import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { PanelGroups } from "./PanelGroups";

/**
 * Nine panels grouped by signal type. Traffic, errors, saturation, in that
 * order, because that is the order a person diagnosing reads them. One error
 * panel is firing and sits where a reader would look for it.
 */
const Stat = ({ label, value, critical }: { label: string; value: string; critical?: boolean }) => (
  <Card className={cn("p-3 shadow-none", critical && "border-status-critical")}>
    <p className="text-xs text-muted-foreground">{label}</p>
    <p className={cn("mt-1 text-lg font-semibold tabular-nums", critical && "text-status-critical")}>{value}</p>
  </Card>
);

export default function Demo() {
  return (
    <div className="rounded-lg border bg-card p-4">
      <PanelGroups
        axis="signal"
        groups={[
          {
            label: "Traffic",
            panels: [
              <Stat key="rps" label="Requests / s" value="1,240" />,
              <Stat key="sessions" label="Active sessions" value="8,912" />,
              <Stat key="bw" label="Egress" value="210 MB/s" />,
            ],
          },
          {
            label: "Errors",
            panels: [
              <Stat key="5xx" label="5xx rate" value="0.21%" />,
              <Stat key="4xx" label="4xx rate" value="2.4%" />,
              <Stat key="jobs" label="Failed jobs" value="3" critical />,
            ],
          },
          {
            label: "Saturation",
            panels: [
              <Stat key="cpu" label="CPU" value="61%" />,
              <Stat key="mem" label="Memory" value="78%" />,
              <Stat key="queue" label="Queue depth" value="42" />,
            ],
          },
        ]}
      />
    </div>
  );
}

What it renders. Identical markup in both panes, with only the token values changing.

Copy-paste: this implementation as plain text

Examples

Captures whose hotspots reference this pattern, grouped by product and dated. The dashed boxes are this pattern; hover any box for the note.