Statusas status widget for React

A badge that says whether your services are up, read straight from your statusas.lt status page. It is a React Server Component: it fetches on the server, ships no client JavaScript, and degrades to "Unknown" rather than throwing if the API cannot be reached.

Install

npm install @statusas/react
pnpm add @statusas/react
yarn add @statusas/react
bun add @statusas/react

React 18 or 19.

Use it

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

export default function Page() {
  return <StatusWidget slug="your-page-slug" />;
}

The slug is your status page's subdomain — your-page-slug.statusas.lt. Pass href to point the badge somewhere else, for instance your own domain:

<StatusWidget slug="your-page-slug" href="https://status.your-company.com" />

Language

The label defaults to English. Pass locale for 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 surrounding page is in another language. An unrecognised locale falls back to English rather than throwing.

Styles

With Tailwind v4, tell it to scan the package:

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

With Tailwind v3, extend content:

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

Not using Tailwind? Import the compiled stylesheet once:

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

Style it yourself

getStatus is the badge without the markup.

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

async function CustomStatusWidget() {
  const { status } = await getStatus("your-page-slug");
  return <div>{/* your own markup */}</div>;
}

type Status =
  | "operational"
  | "degraded_performance"
  | "partial_outage"
  | "major_outage"
  | "under_maintenance"
  | "incident"
  | "unknown";

It calls https://api.statusas.lt/public/status/:slug, which needs no credentials. Self-hosting? Set STATUSAS_API_URL, or pass a base URL as the second argument.

More

• Widget guide
• API reference
• Contact

MIT licensed. Built by LOYALTY LT, MB.