All examples

React code example

This page is a copyable code example. It does not run React in the browser. Install{" "} @razorsoft/tracewise-status and paste the snippet into a Client Component. It needs React 18 or later. Replace your-public-slug with a publicly enabled status page. No API key. The live React previews are on the component documentation.

npm install @razorsoft/tracewise-status

"use client";

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

export function StatusWidgets() {
  return (
    <>
      <TraceWiseStatus slug="your-public-slug" variant="badge" />
      <TraceWiseStatus slug="your-public-slug" variant="indicator" showLabel />
      <TraceWiseStatus slug="your-public-slug" variant="card" showUptime />
      <TraceWiseUptimeHistory slug="your-public-slug" period={30} showUptime />
      <TraceWiseIncidentList slug="your-public-slug" limit={5} />
    </>
  );
}

shadcn

Each command adds a thin wrapper around the same package.

npx shadcn@latest add https://www.tracewise.dev/r/tracewise-status-badge.json
npx shadcn@latest add https://www.tracewise.dev/r/tracewise-status-indicator.json
npx shadcn@latest add https://www.tracewise.dev/r/tracewise-status-card.json
npx shadcn@latest add https://www.tracewise.dev/r/tracewise-uptime-history.json
npx shadcn@latest add https://www.tracewise.dev/r/tracewise-incident-list.json

Catalog: /r/registry.json