How to Use statusas React Widget

Add an statusas status widget to your React or Next.js app with the @statusas/react package as a React Server Component, or build your own with the typed fetch helper.

Install the npm package:

npm install @statusas/react

React server component

import { StatusWidget } from "@statusas/react";

export function Page() {
  return <StatusWidget slug="status" />;
}

It will automatically attach the slug to the href to allow the user to open a new tab on click to https://slug.statusas.lt. If you want to redirect to a specific page, use the href property:

<StatusWidget slug="documenso" href="https://status.documenso.com" />

Note

StatusWidget is an async function and will only work with RSC. Using it within a plain React app will not work.

Styling

With Tailwind CSS

The widget is styled with Tailwind utility classes, so Tailwind has to scan the published package for them.

Tailwind v4 — add a @source directive to the CSS file that imports Tailwind:

/* app/globals.css */
@import "tailwindcss";
@source "../node_modules/@statusas/react/dist";

Tailwind v3 — add the package to content:

// tailwind.config.js
module.exports = {
  content: [
    "./app/**/*.{tsx,ts,mdx,md}",
    "./node_modules/@statusas/react/dist/**/*.{js,mjs}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Without Tailwind CSS

// app/layout.tsx
import "@statusas/react/styles.css";

Language

The label defaults to English. Pass locale to get one of the eight languages a status page serves — lt, en, fr, de, tr, hi, ko, ja:

<StatusWidget slug="your-page-slug" locale="lt" />
// Veikia

The badge sets lang on its own element, so a screen reader announces the label in the right voice even when the page around it is in another language. An unrecognised locale falls back to English rather than throwing.

Typed fetch function

import { getStatus } from "@statusas/react";

// React Server Component
async function CustomStatusWidget() {
  const res = await getStatus("slug");
  // ^StatusResponse = { status: Status }

  const { status } = res;
  // ^Status = "unknown" | "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance" | "incident"

  return <div>{/* customize */}</div>;
}

getStatus never throws: a network failure or a non-2xx response degrades to { status: "unknown" } rather than bubbling an error into your page.

Pointing at a self-hosted API

Both getStatus and StatusWidget call https://api.statusas.lt by default. If you self-host statusas, set OPENSTATUS_API_URL on the server — that is the only lever for StatusWidget, which takes just slug and href. getStatus additionally accepts the base URL as a second argument:

const res = await getStatus("slug", "https://api.status.example.com");

The variable is read at request time and has no NEXT_PUBLIC_ prefix, so a prebuilt image can be pointed at a different API without rebuilding.