openstatus.dev
Openstatus
www.openstatus.dev
1# Status Widget
2
3Create an account on [openstatus.dev](https://openstatus.dev), start monitoring
4your endpoints and include your own StatusWidget into your React Application.
5
6
7
8## Install
9
10```bash
11npm install @openstatus/react
12pnpm add @openstatus/react
13yarn add @openstatus/react
14bun add @openstatus/react
15```
16
17## How to use the StatusWidget in your Next.js App Router
18
19### Include the styles.css
20
21If you are using tailwind, extend your config with:
22
23```js
24// tailwind.config.js
25module.exports = {
26 content: [
27 "./app/**/*.{tsx,ts,mdx,md}",
28 // OpenStatus Widget
29 "./node_modules/@openstatus/react/**/*.{js,ts,jsx,tsx}",
30 ],
31 theme: {
32 extend: {},
33 },
34 plugins: [],
35};
36```
37
38Otherwise, include the styles in your App:
39
40```tsx
41// app/layout.tsx
42import "@openstatus/react/dist/styles.css";
43```
44
45The `StatusWidget` is a React Server Component. Include the `slug` to your
46status-page.
47
48```tsx
49import { StatusWidget } from "@openstatus/react";
50
51export function Page() {
52 return <StatusWidget slug="status" />;
53}
54```
55
56## Headless getStatus utility function
57
58If you would like to style it yourself, you can use the `getStatus` function to
59access the type response of the api call to:
60
61`https://api.openstatus.dev/public/status/:slug`
62
63Learn more about our supported
64[API endpoints](https://docs.openstatus.dev/api-reference/auth).
65
66```ts
67import { getStatus } from "@openstatus/react";
68
69// React Server Component
70async function CustomStatusWidget() {
71 const res = await getStatus("slug");
72 // ^StatusResponse = { status: Status }
73
74 const { status } = res;
75 // ^Status = "unknown" | "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance"
76
77 return <div>{/* customize */}</div>;
78}
79```
80
81```ts
82export type Status =
83 | "operational"
84 | "degraded_performance"
85 | "partial_outage"
86 | "major_outage"
87 | "under_maintenance"
88 | "unknown"
89 | "incident";
90```
91
92Learn more in the [docs](https://docs.openstatus.dev/packages/react).
93
94### About OpenStatus
95
96OpenStatus is an open source monitoring services with incident managements.
97
98Follow our journey [@openstatusHQ](https://x.com/openstatusHQ).