---
title: "React status page component for Next.js | Logdash"
description: "A copy-paste React status page: one shadcn command, your Tailwind theme, server rendering in Next.js, a Vercel starter, and the same component for Svelte."
url: https://logdash.io/status-page/react
---

# React status page

Install the Logdash status page component with one shadcn command, pass it your status page id, and your React or Next.js app renders live status, uptime per monitor and 90 days of history in your own Tailwind theme.

A status page in React is two problems: getting the data and drawing it. Logdash answers the first with a public JSON endpoint for every published status page, no API key needed, and the second with a component you copy into your repo. The file is yours. It is plain React and Tailwind with one dependency, `@logdash/status`, a typed client with zero runtime dependencies that polls every 60 seconds, pauses in hidden tabs and keeps the last good data when a request fails.

## shadcn status page

The component ships as a shadcn registry item, so it installs the same way a Button does, into any project that has already run shadcn init.

```bash
npx shadcn add https://logdash.io/r/react/status-page.json
```

That writes `components/status-page.tsx` and installs `@logdash/status`. The file renders an overall banner, one row per monitor with its uptime, and 90 daily bars with a tooltip. `StatusBanner`, `MonitorRow` and `DailyBars` are exported on their own too, so a footer can show the one-line banner and skip the rest.

## Next.js status page

Fetch on the server and pass the result as `initialData`. The HTML arrives with real status in it, so crawlers and visitors without JavaScript see the same page, and the client takes over polling with no loading flash.

 app/status/page.tsx 

```typescript
import { fetchStatusPage } from '@logdash/status';
import { StatusPage } from '@/components/status-page';

export const revalidate = 60;

export default async function Page() {
  const page = await fetchStatusPage('your-status-page-id');

  return <StatusPage statusPageId="your-status-page-id" initialData={page} />;
}
```

The API caches every page for 60 seconds, so a `revalidate` below 60 buys nothing. A bad id fails the build instead of shipping an empty page: 404 means no page has that id, 403 means it is not published yet.

## Tailwind status page

There is no stylesheet to fight. The component uses the shadcn CSS variables, such as `text-foreground`, `text-muted-foreground` and `border-border`, so it takes your colours, fonts and dark mode from the theme you already have. Only the three status colours, green, amber and red, are written into the file, and each is one edit away.

## Status page on Vercel

If you want the page as its own site rather than a route in your app, the Next.js starter in `templates/status-page-next` is this component plus one page. Its README has a Deploy with Vercel button that asks for one variable, `LOGDASH_STATUS_PAGE_ID`. Give it its own project and subdomain: a status page that deploys with your app goes down with your app.

## Svelte status page

The same component exists for Svelte 5 through shadcn-svelte, with the same props, the same theme variables and the same 90 days of bars.

```bash
npx shadcn-svelte add https://logdash.io/r/svelte/status-page.json
```

## Your component or the hosted page

### Component in your app vs hosted Logdash page

| Feature                        | Logdash                                | Hosted page                          |
| ------------------------------ | -------------------------------------- | ------------------------------------ |
| Setup                          | One shadcn command and a route         | Publish in Logdash, no code          |
| Look                           | Your fonts, colours and layout         | Logdash design with your monitors    |
| Your own domain                | Any domain, on any plan                | Pro plan                             |
| Stays up when your app is down | Only if you host it apart from the app | Runs on Logdash, apart from your app |
| Upgrades                       | You own the file and its changes       | Logdash ships them                   |

### When the hosted page is the better pick

- You have no React or Svelte site to put it in, and a logdash.io link is enough for your customers.
- You would rather not own the deploy. A page you host is one more thing that can break during the incident it is meant to report.

## Put a monitor behind it

1. **Add a monitor** Point an HTTP monitor at your health endpoint. Logdash checks it every 5 minutes on the free plan, every minute on Builder and every 15 seconds on Pro, and stores status code and response time.
2. **Publish the status page** Add the monitor to a status page, publish it and copy the id from the Build your own section. That id is the only prop the component needs.
3. **Break it on purpose** Return a 503 from the health endpoint. The next check flips the monitor to down, the component shows it on its next poll, and a Telegram alert reaches your phone.

### How do I add a nextjs status page to an existing app? 

Run the shadcn command, add a route such as app/status/page.tsx that calls fetchStatusPage on the server, and render the StatusPage component with initialData. Set revalidate to 60, which matches the API cache.

### Is there a shadcn status page component? 

Yes. npx shadcn add https://logdash.io/r/react/status-page.json copies one file into your components folder. Its only dependency is @logdash/status, and the file is yours to edit.

### Does the tailwind status page follow my theme? 

Yes. It reads the shadcn CSS variables, so background, text, borders and dark mode come from your theme. The green, amber and red status colours are set in the component itself.

### Can I deploy the status page on Vercel? 

Yes. The Next.js starter has a Deploy with Vercel button and needs one environment variable, LOGDASH\_STATUS\_PAGE\_ID. Vercel Hobby is for non-commercial use only, so a page for a paying product belongs on a paid Vercel plan or another host.

### Is there a svelte status page component? 

Yes, for Svelte 5: npx shadcn-svelte add https://logdash.io/r/svelte/status-page.json. In SvelteKit, fetch the page in a load function and pass it as initialData for server rendering.

## Keep reading

[All status page guides](https://logdash.io/status-page): One page per question, from the status page API to a free page on your own domain.

[Status page embed](https://logdash.io/status-page/embed): Embed a Logdash status page by dropping a copy-paste component into your site, which renders live status and 90 days of history from a public JSON API, or by adding SVG uptime badges anywhere an image tag works.

[Status page examples](https://logdash.io/status-page/examples): The status pages worth copying are GitHub for incident updates, Vercel for per-region components, Stripe for a short component list, Linear for showing an unflattering number and Cloudflare for maintenance notices.

[Status page best practices](https://logdash.io/status-page/best-practices): Host the status page apart from your app, drive it from real checks, list only what customers can tell apart, show uptime over a stated window rounded down, and post a timestamped update at least every hour during an incident.

[Uptime monitoring](https://logdash.io/features/monitoring): HTTP checks as often as every 15 seconds. When one fails, Telegram tells you before your users do.