Status Dashboard
NewInstallation
npx shadcn@latest add https://uibrik.com/r/status-dashboard.jsonInstall the packages
npm install @number-flow/react @tabler/icons-react motion react-use-measureAdd the cn helper
Imports
cnfrom@/lib/utils, whichshadcn initcreates. Add it by hand without shadcn.Copy the source into your project
components/uibrik/status-dashboard/status-dashboard.tsx"use client"; import { useCallback, useState, type FormEvent, type PointerEvent, type ReactNode } from "react"; import { createPortal } from "react-dom"; import { motion, useReducedMotion } from "motion/react"; import { IconAlertTriangle, IconCircleCheck, IconCircleCheckFilled } from "@tabler/icons-react"; import { cn } from "@/lib/utils"; import { Badge, Button, Dialog, EASE_OUT, FOCUS, Field, Input, PageHeader, Panel, TILE, TONES, ago, useToast, type Tone } from "../_app/app-kit"; import { Announce, DataTable, GRID, SERIES_VARS, STATUS, clamp, dayLabels, linePath, linear, niceTicks, seeded, seriesColor, useChartCursor, useWidth, wave,
Adds the files to
components/uibrik/status-dashboard and installs @number-flow/react, @tabler/icons-react, motion and react-use-measure. With the @uibrik namespace set up: npx shadcn@latest add @uibrik/status-dashboard.Props
StatusDashboard- title
- Type string
- "System status"
- Names the page.
- days
- Type number
- 90
- Most days of uptime history; fewer show in narrow containers.
- updatedMinutesAgo
- Type number
- 1
- Minutes since the last check.
- services
- Type { name: string; state: "operational" | "degraded" | "outage" | "maintenance"; days: { date: string; state: "operational" | "degraded" | "outage" | "none"; downtime?: number; note?: string }[] }[]
- –
- One row per service with a day of history per entry, oldest first. Downtime is in minutes.
- regions
- Type { name: string; code: string; latency: number; state: ServiceState }[]
- –
- Region health tiles. Latency is in ms.
- latency
- Type { p50: number; p95: number }[]
- –
- One sample a minute over the last hour, oldest first, in ms.
- incidents
- Type { id: string; title: string; severity: "minor" | "major" | "critical"; services: string[]; updates: { status: "investigating" | "identified" | "monitoring" | "resolved"; message: string; minutesAgo: number }[] }[]
- –
- Recent incidents, newest first; each incident's updates are newest first.
- className
- Type string
- –
- Classes for the root.
