diff --git a/apps/docs/packages/react.mdx b/apps/docs/packages/react.mdx
index c9e166d60..9dd29cfc7 100644
--- a/apps/docs/packages/react.mdx
+++ b/apps/docs/packages/react.mdx
@@ -1,3 +1,9 @@
+Install the [npm](https://www.npmjs.com/package/@openstatus/react) package:
+
+```bash
+npm install @openstatus/react
+```
+
## React Server Component
```tsx
@@ -55,10 +61,8 @@ async function CustomStatusWidget() {
// ^StatusResponse = { status: Status }
const { status } = res;
- // ^Status = "unknown" | "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance"
+ // ^Status = "unknown" | "operational" | "degraded_performance" | "partial_outage" | "major_outage" | "under_maintenance" | "incident"
return
{/* customize */}
;
}
```
-
-[Link to npm](https://www.npmjs.com/package/@openstatus/react)
diff --git a/apps/web/src/components/layout/status-widget-suspense.tsx b/apps/web/src/components/layout/status-widget-suspense.tsx
index 39196bc6c..d5d3bc8e6 100644
--- a/apps/web/src/components/layout/status-widget-suspense.tsx
+++ b/apps/web/src/components/layout/status-widget-suspense.tsx
@@ -1,7 +1,15 @@
import { Suspense } from "react";
+import { ExternalLink } from "lucide-react";
import type { StatusWidgetProps } from "@openstatus/react";
import { StatusWidget } from "@openstatus/react";
+import {
+ Button,
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from "@openstatus/ui";
export function StatusWidgetFallback() {
return (
@@ -15,7 +23,25 @@ export function StatusWidgetFallback() {
export function StatusWidgetContainer(props: StatusWidgetProps) {
return (
}>
-
+
+
+
+
+
+
+
+
+
+
+
+
);
}