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.

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

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.

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

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.
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.
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.