TraceWise Status components

Installation

npm install @razorsoft/tracewise-status

Peer dependency: React 18 or later. No CSS framework required. The shadcn components below are thin wrappers around this package. They do not reimplement fetching, caching, or incident state.

Basic usage

import { TraceWiseStatus } from "@razorsoft/tracewise-status";

export function StatusWidget() {
  return (
    <TraceWiseStatus
      slug="your-public-slug"
      variant="card"
      showUptime
    />
  );
}

Status Badge

A compact two-tone badge for one public status page. It links to that page and shows the current overall status. No API key.

Installation

npm install @razorsoft/tracewise-status

npx shadcn@latest add \
  https://www.tracewise.dev/r/tracewise-status-badge.json

Usage

"use client";

import { TraceWiseStatusBadge } from "@/components/tracewise-status-badge";

export function FooterStatus() {
  return (
    <TraceWiseStatusBadge
      slug="your-public-slug"
      className="my-status"
    />
  );
}

Props

npm package: @razorsoft/tracewise-status

Status Indicator

An inline colored dot with an optional text label for one public status page. No API key.

Installation

npm install @razorsoft/tracewise-status

npx shadcn@latest add \
  https://www.tracewise.dev/r/tracewise-status-indicator.json

Usage

"use client";

import { TraceWiseStatusIndicator } from "@/components/tracewise-status-indicator";

export function FooterStatus() {
  return (
    <TraceWiseStatusIndicator
      slug="your-public-slug"
      showLabel
      className="my-status"
    />
  );
}

Props

npm package: @razorsoft/tracewise-status

Status Card

A linked card with the service name, current status, and optional 24-hour uptime. No API key.

Installation

npm install @razorsoft/tracewise-status

npx shadcn@latest add \
  https://www.tracewise.dev/r/tracewise-status-card.json

Usage

"use client";

import { TraceWiseStatusCard } from "@/components/tracewise-status-card";

export function StatusWidget() {
  return (
    <TraceWiseStatusCard
      slug="your-public-slug"
      showUptime
      className="my-status"
    />
  );
}

Props

npm package: @razorsoft/tracewise-status

Uptime History

A compact horizontal bar of daily availability for the last 7, 30, or 90 days. The preview uses the public demo status page.

Installation

npm install @razorsoft/tracewise-status

npx shadcn@latest add \
  https://www.tracewise.dev/r/tracewise-uptime-history.json

Usage

"use client";

import { TraceWiseUptimeHistory } from "@razorsoft/tracewise-status";

export function Uptime() {
  return (
    <TraceWiseUptimeHistory
      slug="your-public-slug"
      period={30}
      showUptime
      className="my-status"
    />
  );
}

Props

Accessibility

Each day is a list item with a text alternative such as “Oct 16, 2026: Down, 96.20% uptime” or “No data”. The list is labeled with the window length and, when shown, the overall uptime. Loading sets aria-busy. Errors use an alert. Days without checks are gray and are not described as operational. Omit refreshInterval to fetch once; a positive interval cannot be shorter than 60 seconds.

npm package: @razorsoft/tracewise-status

Incident List

A list of recent incidents for monitors on an enabled public status page. The preview uses synthetic demonstration incidents for the demo slug. They are not production incidents.

Installation

npm install @razorsoft/tracewise-status

npx shadcn@latest add \
  https://www.tracewise.dev/r/tracewise-incident-list.json

Usage

"use client";

import { TraceWiseIncidentList } from "@razorsoft/tracewise-status";

export function Incidents() {
  return (
    <TraceWiseIncidentList
      slug="your-public-slug"
      limit={5}
      showResolved
      className="my-status"
    />
  );
}

Props

Accessibility

The list is a labeled section. Each incident shows the public service name, an Open or Resolved text label, and start and resolution times in time elements. Open incidents say Ongoing. Resolved incidents include a duration when one was recorded. Incident summaries are not shown. An empty history says “No recent incidents”. The demo slug is labeled Demonstration data. Loading sets aria-busy. Errors use an alert. Omit refreshInterval to fetch once; a positive interval cannot be shorter than 60 seconds.

npm package: @razorsoft/tracewise-status

JavaScript and HTML embeds

@razorsoft/tracewise-status-js renders the same five components without React. It uses the shared public status client, so status labels, uptime formatting, and incident rows match the React package. It does not run checks and it does not accept an API key. Import one entry, such as @razorsoft/tracewise-status-js/badge, when you only need that component.

npm

npm install @razorsoft/tracewise-status-js

JavaScript

import {
  createIncidentList,
  createStatusBadge,
  createStatusCard,
  createStatusIndicator,
  createUptimeHistory,
} from "@razorsoft/tracewise-status-js";

const slug = "your-public-slug";

const badge = createStatusBadge({ target: "#badge", slug });
const indicator = createStatusIndicator({ target: "#indicator", slug, showLabel: true });
const card = createStatusCard({ target: "#card", slug, showUptime: true });
const history = createUptimeHistory({ target: "#history", slug, period: 30, showUptime: true });
const incidents = createIncidentList({ target: "#incidents", slug, limit: 5 });

await Promise.all([badge.ready, indicator.ready, card.ready, history.ready, incidents.ready]);

badge.destroy();
indicator.destroy();
card.destroy();
history.destroy();
incidents.destroy();

target is an element or a CSS selector. Each handle has element, ready, update(), refresh(), and destroy(). destroy() removes the widget and clears its timer. Omit refreshInterval to fetch once. A positive interval cannot be shorter than 60 seconds. Several widgets on one page share an in-flight request for the same URL. Importing the package does not scan the document.

TypeScript

import {
  createStatusCard,
  type TraceWiseMount,
  type TraceWiseStatusCardOptions,
} from "@razorsoft/tracewise-status-js";

const card: TraceWiseMount<TraceWiseStatusCardOptions> = createStatusCard({
  target: document.querySelector("#status")!,
  slug: "your-public-slug",
  showUptime: true,
});

await card.ready;
await card.refresh();
card.destroy();

Custom elements

Importing the package registers the five tags. The published embed script registers the same tags, so a page that already loads status.js can use them without npm.

<tracewise-status-badge slug="your-public-slug"></tracewise-status-badge>
<tracewise-status-indicator slug="your-public-slug" show-label></tracewise-status-indicator>
<tracewise-status-card slug="your-public-slug" show-uptime></tracewise-status-card>
<tracewise-uptime-history slug="your-public-slug" period="30" show-uptime></tracewise-uptime-history>
<tracewise-incident-list slug="your-public-slug" limit="5"></tracewise-incident-list>

<script type="module">
  import "@razorsoft/tracewise-status-js";
</script>

show-uptime is off unless the attribute is present. show-label and show-resolved default to on; set them to "false" to turn them off. period is 7, 30, or 90. limit is 5, 10, or 20. api-base-url overrides the API origin.

Script tag

<div data-tracewise-status="your-public-slug"></div>
<div data-tracewise-status="your-public-slug" data-tracewise-component="indicator"></div>
<div data-tracewise-status="your-public-slug" data-tracewise-component="card" data-tracewise-show-uptime="true"></div>
<div data-tracewise-status="your-public-slug" data-tracewise-component="history" data-tracewise-period="30"></div>
<div data-tracewise-status="your-public-slug" data-tracewise-component="incidents" data-tracewise-limit="5"></div>

<script src="https://www.tracewise.dev/embed/status.js" defer></script>

The script finds every data-tracewise-status element and renders it. The attribute value is the public slug. Calling it again does not mount a second copy. After the script loads, TraceWiseStatus.init() scans for new elements and TraceWiseStatus.destroyTraceWiseEmbeds() removes them.

HTML data attributes

WordPress Custom HTML

Paste this into a Custom HTML block. Include the script once on the page. The status page must be publicly enabled. WordPress allows the script for roles that can publish unfiltered HTML.

<div data-tracewise-status="your-public-slug"></div>
<div data-tracewise-status="your-public-slug" data-tracewise-component="indicator"></div>
<div data-tracewise-status="your-public-slug" data-tracewise-component="card" data-tracewise-show-uptime="true"></div>
<div data-tracewise-status="your-public-slug" data-tracewise-component="history" data-tracewise-period="30"></div>
<div data-tracewise-status="your-public-slug" data-tracewise-component="incidents" data-tracewise-limit="5"></div>
<script src="https://www.tracewise.dev/embed/status.js" defer></script>

Working copies of these snippets, using the public demo slug, are in the integration examples. npm package: @razorsoft/tracewise-status-js

Choosing an integration

• React uses @razorsoft/tracewise-status, JSX props, and the shadcn registry items. The peer dependency is React 18 or later. In Next.js, render it from a Client Component.
• Vanilla JavaScript uses @razorsoft/tracewise-status-js. Call createStatusBadge, createStatusIndicator, createStatusCard, createUptimeHistory, or createIncidentList, or place the custom elements after importing the package. Call destroy() when you remove a programmatic widget. Subpath imports such as @razorsoft/tracewise-status-js/badge load one component. @razorsoft/tracewise-status-js/client is the fetch client with no DOM.
• An HTML page loads https://www.tracewise.dev/embed/status.js and marks hosts with data-tracewise-status. TraceWiseStatus.init() scans for new hosts. TraceWiseStatus.destroyTraceWiseEmbeds() removes them. The same script exposes the create* functions on TraceWiseStatus.
• WordPress uses that HTML inside a Custom HTML block. TraceWise does not publish a WordPress plugin.
• All three read the same public status, history, and incident endpoints. They fetch once unless you set a refresh interval of at least 60 seconds. They share the --tw-status-* CSS variables. None of them accepts an API key.

Styling customization

The same CSS variables apply to the React components, the JavaScript custom elements, and the HTML embed. Override them on a parent, with className, or with data-tracewise-class. Light and dark defaults follow prefers-color-scheme.

.my-status {
  --tw-status-operational: #0f766e;
  --tw-status-degraded: #b45309;
  --tw-status-down: #b91c1c;
  --tw-status-no-data: #d4d4d8;
  --tw-status-brand: #4170A8;
  --tw-status-surface: #ffffff;
  --tw-status-radius: 10px;
}

Next.js usage

The shadcn components are Client Components. You can import them from a Server Component. The npm component uses fetch and React state, so render it from a Client Component.

"use client";

import { TraceWiseStatus } from "@razorsoft/tracewise-status";

export function FooterStatus() {
  return <TraceWiseStatus slug="your-public-slug" variant="indicator" />;
}

Public status page requirements

• Enable the public status page in Dashboard → Settings → Status page
• Set a public slug and keep the page enabled
• Only publicly visible aggregate status, 24h uptime, daily history, and incidents for monitors on that page are exposed
• Disabled or private pages return 404; the component shows an unknown/error state
• Status endpoint: GET https://www.tracewise.dev/api/public/status/:slug (CORS enabled, cached ~60s)
• History endpoint: GET https://www.tracewise.dev/api/public/status/:slug/history?days=30 (daysis 7, 30, or 90). History is limited to the workspace plan's retention. Days with no stored checks are returned as no data.
• Incidents endpoint: GET https://www.tracewise.dev/api/public/status/:slug/incidents?limit=5 (limit is 5, 10, or 20; status is all, open, or resolved). Status is applied before the limit. The default is all. Each row is an incident TraceWise already stores: open or resolved, the public monitor name, group when set, and start and resolution times. Internal summaries are not included. Monitor URLs, workspace ids, probe errors, and notification details are omitted. Disabled or unknown slugs return 404. The list does not run checks.