Depths logo (light)Depths Components

Building Blocks

A curated library of React 19 + Tailwind v4 analytics components, showcased in a Next.js 15.5 App Router demo. Jump into a cluster below.

1

Foundations

KPIs, grids, tables, gauge & controls.

2

Trends

Area, line, bands.

3

Category

Breakdowns: bars & donut.

4

Distribution

Histogram & heatmap.

5

Live

Real-time logs & traces.

Foundations

KPI Stat

Single KPI with optional sparkline and delta coloring.

Active Sessions
3,721
6.1%

Stat Grid

Responsive grid of KPI cards. Uses Tailwind v4 container queries (@md:), so a container ancestor is provided here.

Title for Stat Grid
New Users
12,540
4.5%
DAU
8,421
-1.2%
Revenue
$183,250
2.7%
Churn
0.03
-0.4%

Data Table

Searchable table with optional CSV export.

Service Metrics
8 of 8
Service Metrics
ServiceRequestsErrorsp95 (ms)
api-gateway152403132187
billing8490221224
users6431115141
search5877761302
Page 1 of 2

Control Bar

Self-contained control bar — only title and controls.

Query Controls
10

Radial Gauge

Radial gauge showing progress/value with dynamic color thresholds and center label.

Utilization

Current system load.

Trends

Area Series

Stacked area series with labeled axes, header legend (click to toggle, hover to focus), a custom tooltip, and a tidy brush for quick zoom.

Area Series

Orders, revenue, and refunds over time.

Series: orders, revenue, refunds. X-axis: Index. Y-axis: Value.

Line Series

Multi-line time series displayed as percentages (e.g. uptime & error rate) with a header legend (click to toggle, hover to focus), custom tooltip, and brush for quick zoom.

Line Series

Uptime and error rate over time.

Series: uptime, errorRate. X-axis: Index. Y-axis: Rate.

Band Line

P50–P95 latency band with a mean overlay; hover for the exact range and mean. Toggle series from the header legend when multiple bands are provided.

Latency Band

Typical (p50) to high tail (p95) latency with mean overlay.

Scatter Plot

Multi-group scatter plot with colored dots, header legend (click to toggle, hover to focus), and custom tooltip showing x,y coordinates.

Scatter Plot

Two groups of correlated points over index.

Series: groupA, groupB. X-axis: Index. Y-axis: Value.

Sankey Diagram

Sankey diagram showing flows between nodes, with custom node rendering, tooltips on links, and proportional link widths.

Sankey Diagram

Multi-stage flow from sources to sinks.

Category

Bar List

Interactive sorted category list with proportional bars, deltas, and click handlers.

Top Categories

By traffic volume

  • Search
    128,430
    +3.6%
  • Checkout
    96,210
    -1.8%
  • Auth
    88,775
    +0.9%
  • Reports
    66,402
    +5.1%
  • Profile
    44,990
    -2.4%
  • Billing
    38,215
    +1.1%
  • Files
    26,304
    +0.2%
  • Admin
    19,145
    -0.6%

Grouped Bar

Grouped/stacked bars with custom tooltip, interactive legend, grid, and brush selector.

Channel Performance

Across key categories

Donut Chart

Donut with combined small slices, custom tooltip, center total, and slice clicks.

Regional Share

Traffic distribution

Total Share
100%
Distribution

Histogram

Frequency histogram (0–100). Toggle log scale (safe domain) or cumulative counts.

Histogram

Count of values by 10-point bins.

Heatmap

7×24 traffic heatmap with a perceptual OKLCH scale. Use log to reveal heavy tails.

Heatmap

7×24 traffic with a perceptual OKLCH scale and quantitative legend.

Hour of day
1626324050
linear

World Map

World map choropleth with perceptual color ramp, hover tooltips, and flag icons.

World Map
Live

Live Tail List

Live logs via Server-Sent Events; filter by severity or search.

Live Logs

Receiving logs from an SSE endpoint

Live Logs
TimeSeverityServiceMessageActions
No logs available.
0 logs displayed

Live Traces Feed

Live traces with quick filters; click any row to open details.

Live Traces

Receiving traces from an SSE endpoint

Live Traces
TimeStatusServiceNameDurationActions
No traces available.
0 traces displayed