Patterns

Patterns are original Clawscale components for dense screens: headline numbers, changes, trends, key and value lists and status bars. Blueprint has no equivalent for them.

Usage#

import {
  Delta,
  Metric,
  PropertyList,
  PropertyListItem,
  Sparkline,
  StatusBar,
  StatusBarItem,
  StatusBarSpacer,
} from "@clawscale/react";

Example#

A row of metrics, each in a card with a change and a trend.

Throughput

12,480rows/s

p95 latency

182ms

Error rate

0.42%

Queue lag

4.1s

patterns/overview/metric-row.tsx

import { Card, Metric } from "@clawscale/react";

const metrics = [
  {
    label: "Throughput",
    value: "12,480",
    unit: "rows/s",
    delta: 8.2,
    trend: [10940, 11210, 11020, 11460, 11330, 11790, 11650, 11920, 12050, 12210, 12330, 12480],
  },
  {
    label: "p95 latency",
    value: "182",
    unit: "ms",
    delta: 3.1,
    goodDirection: "down",
    trend: [171, 169, 174, 172, 170, 176, 175, 178, 177, 180, 179, 182],
  },
  {
    label: "Error rate",
    value: "0.42",
    unit: "%",
    delta: -12.5,
    goodDirection: "down",
    trend: [0.51, 0.49, 0.5, 0.48, 0.47, 0.49, 0.46, 0.45, 0.44, 0.45, 0.43, 0.42],
  },
  {
    label: "Queue lag",
    value: "4.1",
    unit: "s",
    delta: -6.8,
    goodDirection: "down",
    trend: [4.6, 4.5, 4.7, 4.4, 4.5, 4.3, 4.4, 4.2, 4.3, 4.2, 4.1, 4.1],
  },
] as const;

export default function PatternsMetricRow() {
  return (
    <div style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))" }}>
      {metrics.map((metric) => (
        <Card key={metric.label} compact>
          <Metric caption="vs last hour" {...metric} />
        </Card>
      ))}
    </div>
  );
}

Components#

Component	Use it for
Metric	A labeled headline number with a change and a trend
Delta	A signed change, colored by whether it is good or bad
Sparkline	A word-sized trend line in tables and tiles
Property list	Key and value pairs in inspectors and detail panels
Status bar	Connection state and counts along the bottom of an app
Charts	Chart tokens for your chart library or hand-built SVG

Built on tokens#

Patterns read the same --cs-* tokens as every Blueprint component. They follow the theme and the color scheme, and a token override changes them too. Sparklines draw with the chart slots, --cs-chart-1 by default. See Tokens.

Server rendered#

Patterns keep no state and measure nothing. The server sends finished HTML, and sparklines arrive as SVG paths, so nothing shifts after hydration. Status bar icons render on the server once you import @clawscale/react/sync-icons.

Use patterns in server components. Function props, such as format on Delta and onClick on StatusBarItem, need a client component. See Next.js.

Class names#

Pattern class names start with cs-. ClawscaleClasses has constants for them, such as ClawscaleClasses.METRIC_VALUE. Two utilities work in your own markup too: ClawscaleClasses.NUMERIC sets tabular numbers and ClawscaleClasses.MONOSPACE sets the monospace font. In server components, import ClawscaleClasses from @clawscale/react/common.