TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

Status Widget

Create an account on openstatus.dev, start monitoring your endpoints and include your own StatusWidget into your React Application.

Image of StatusWidget on openstatus.dev


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

How to use the StatusWidget in your Next.js App Router

Include the styles.css

If you are using tailwind, extend your config with:

// tailwind.config.js
module.exports = {
  content: [
    // OpenStatus Widget
  theme: {
    extend: {},
  plugins: [],

Otherwise, include the styles in your App:

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

The StatusWidget is a React Server Component. Include the slug to your status-page.

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

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

Headless getStatus utility function

If you would like to style it yourself, you can use the getStatus function to access the type response of the api call to:


Learn more about our supported API endpoints.

import { getStatus } from "@openstatus/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"

  return <div>{/* customize */}</div>;
export type Status =
  | "operational"
  | "degraded_performance"
  | "partial_outage"
  | "major_outage"
  | "under_maintenance"
  | "unknown"
  | "incident";

Learn more in the docs.

About OpenStatus

OpenStatus is an open source monitoring services with incident managements.

Follow our journey @openstatusHQ.

Package Sidebar


npm i @openstatus/react

Weekly Downloads






Unpacked Size

23 kB

Total Files


Last publish


  • maximiliankaske