---
title: "Status page template: Next.js, one-click Vercel | Logdash"
description: "An MIT Next.js status page template with a one-click Vercel deploy, a one-file HTML version you can paste, and how it compares to Upptime and Uptime Kuma themes."
url: https://logdash.io/status-page/template
---

# Status page template

The Logdash Next.js starter is a status page template you deploy to Vercel in one click: paste a status page id and it serves live uptime for your monitors, rendered on the server and refreshed every 60 seconds.

Most status page templates are a static mockup with three green rows and a made-up 99.99%. The design was never the hard part. The data is: something has to check your endpoints from outside your network every few minutes, keep 90 days of history and stay up through the outage the page exists to announce. A template without that is a screenshot.

The Logdash starter works the other way round. Logdash runs the checks and keeps 90 days of history. The template is a small Next.js app, one page and one component, that renders that data in your design.

## Deploy the Next.js status page template

The starter README has a Deploy with Vercel button. It clones the template into your own repository and asks for one variable, `LOGDASH_STATUS_PAGE_ID`. To try it locally first:

 Run it locally 

```bash
npx create-next-app@latest status-page \
  --example https://github.com/logdash-io/logdash.io \
  --example-path templates/status-page-next
cd status-page
# Logdash's own page, so it runs as pasted. Swap in your id later.
echo "LOGDASH_STATUS_PAGE_ID=status.logdash.io" > .env.local
npm run dev
```

The id is the last part of your status page URL in Logdash, or its verified custom domain. The page is fetched on the server and rendered again at most once a minute, so it arrives complete in the HTML and crawlers see real status rather than a spinner. `next build` fetches once, so a wrong id fails the build instead of shipping a broken page.

- An overall banner: all systems operational, partial outage or major outage.
- A row per monitor with its uptime over 24 hours, 7, 30 and 90 days.
- Ninety daily bars per monitor, each with a tooltip showing that UTC day, its uptime and its checks.
- The last data it had when the Logdash API cannot be reached, never a blank page.

Colours come from the shadcn CSS variables in `app/globals.css`. Replace them with your site theme and it stops looking like a template. Deploy it as its own Vercel project on a subdomain such as `status.example.com`, apart from your app, so one outage cannot take both down.

## Status page HTML template

No framework, no build step. The API accepts requests from any origin, so one file is enough, even opened straight from disk.

 index.html 

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Status</title>
  </head>
  <body>
    <h1 id="name">Status</h1>
    <p id="overall"></p>
    <ul id="monitors"></ul>

    <script type="module">
      // Your status page id, or its verified custom domain.
      const id = 'status.logdash.io';
      const res = await fetch(`https://api.logdash.io/v1/status_pages/${id}`);
      const page = await res.json();

      document.title = page.name;
      document.getElementById('name').textContent = page.name;
      document.getElementById('overall').textContent = page.status;
      document.getElementById('monitors').replaceChildren(
        ...page.monitors.map((monitor) => {
          const li = document.createElement('li');
          const uptime = monitor.uptime['90d']?.toFixed(2) ?? '-';
          li.textContent = `${monitor.name}: ${monitor.status}, ${uptime}% over 90 days`;
          return li;
        }),
      );
    </script>
  </body>
</html>
```

It prints the page name, the overall status and one line per monitor with its 90-day uptime. It fetches once per load and draws no history bars. For bars, read `history.daily`, which always holds 90 UTC days, and format those dates in UTC too, or a visitor west of Greenwich sees every bar labelled a day early.

## Status page template on GitHub: Logdash vs Upptime

### Logdash starter vs Upptime

| Feature         | Logdash                                          | Upptime                                    |
| --------------- | ------------------------------------------------ | ------------------------------------------ |
| What you copy   | A Next.js app, MIT                               | A GitHub template repository, MIT          |
| Check interval  | 5 minutes free, 1 minute Builder, 15 seconds Pro | At most every 5 minutes, on GitHub Actions |
| Accounts needed | Logdash, plus Vercel or any Node host            | GitHub only                                |
| Incidents       | None                                             | GitHub Issues, opened and closed for you   |
| Page design     | One React component you edit                     | Settings in a YAML config                  |

### When Upptime is the better pick

- You want everything inside one GitHub organisation, with no other account anywhere.
- Five-minute checks are enough and you like incidents as GitHub Issues.
- Your code already lives on GitHub and you want the status page to cost nothing extra.

## Uptime Kuma status page template

Kuma has no template system. Each status page has a Custom CSS field, and community themes on GitHub restyle it. Past CSS, its status page endpoints return JSON you could feed into the HTML file above, though Kuma documents them as internal and unsupported for third parties.

1. **Publish a status page** Add your monitors to a status page in Logdash, publish it and copy its id.
2. **Deploy the template** Click Deploy with Vercel in the starter README, paste the id into LOGDASH\_STATUS\_PAGE\_ID and point a status subdomain at the new project.
3. **Watch it go red** Connect Telegram and stop one service. The row on your page turns red within about three minutes, but the Telegram alert gets to you first, with the monitor name and status code.

### Is there a status page HTML template? 

Yes, the single file on this page. Paste it, change the id and open it in a browser. It reads the public API, so it shows live data with no build step. It refreshes on reload only, so wrap the fetch in a 60-second interval if it stays open on a wall screen.

### Is there an Uptime Kuma status page template? 

Not built in. Kuma gives each status page a Custom CSS field, and GitHub has community themes such as cute-kuma and uptime-kuma-themes to paste into it. The layout stays Kuma, only the styling changes.

### Where can I find a status page template on GitHub? 

The Logdash starter lives in templates/status-page-next of logdash-io/logdash.io, MIT licensed. Upptime is a GitHub template repository you copy with Use this template. The awesome-status-pages list collects many more.

### Is there a Next.js status page template? 

Yes, this one: Next.js 16, React 19 and Tailwind 4, one page and one component. It renders on the server with revalidate set to 60 and polls in the browser. The component is the same file the shadcn command installs, so it moves into an existing Next.js app unchanged.

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

[React status page](https://logdash.io/status-page/react): 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.

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

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