Status Console Footer
A free status footer React component for service health, releases, and grouped navigation.
Customise
Code
<FooterStatusConsole
brand="Arcfield Systems"
services={[
{ id: "edge", name: "Edge network", status: "operational" },
{ id: "api", name: "API gateway", status: "operational" },
{ id: "deploy", name: "Deployment API", status: "degraded" },
{ id: "events", name: "Event delivery", status: "outage" },
{ id: "dashboard", name: "Dashboard", status: "operational" },
{ id: "webhooks", name: "Webhooks", status: "operational" },
]}
release={{
version: "v2.8.0",
title: "Regional failover controls",
href: "https://github.com/TemplateEmpire/te-components/releases",
date: "2026-07-18",
}}
groups={[
{
heading: "Platform",
links: [
{ label: "Components", href: "https://templateempire.io/components" },
{ label: "Templates", href: "https://templateempire.io/templates" },
{ label: "Pricing", href: "https://templateempire.io/pricing" },
{ label: "Showcase", href: "https://templateempire.io/showcase" },
],
},
{
heading: "Resources",
links: [
{ label: "Documentation", href: "https://templateempire.io/components" },
{ label: "Changelog", href: "https://github.com/TemplateEmpire/te-components/releases" },
{ label: "Status history", href: "https://templateempire.io/status" },
{ label: "GitHub", href: "https://github.com/TemplateEmpire/te-components" },
],
},
{
heading: "Company",
links: [
{ label: "About", href: "https://templateempire.io/about" },
{ label: "Careers", href: "https://templateempire.io/careers" },
{ label: "Contact", href: "https://templateempire.io/contact" },
{ label: "Licence", href: "https://opensource.org/license/mit" },
],
},
]}
legal="© 2026 Arcfield Systems. All rights reserved."
/>Status Console Footer is a free status footer React component for Next.js, React, and Tailwind that combines explicit service health, a recent release, and grouped sitemap links in one production-ready footer. It gives operational context the structure of a restrained system console while keeping every destination and status readable without JavaScript or motion.
Each service names its operational, degraded, or outage state in visible text, so colour and the optional operational pulse are supplementary. The status panel, release card, and navigation groups rise once by 14 pixels when the footer enters view, then remain settled; pulses stop while the footer is offscreen or the browser tab is hidden.
Reduced motion is fully static, the component makes no network requests, and the semantic footer includes a labelled service list, a real time element, grouped navigation landmarks, and keyboard-visible links.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/footer-status-consoleUsage
import { FooterStatusConsole } from "@/components/footer-status-console";
export default function Page() {
return (
<FooterStatusConsole
brand="Arcfield Systems"
services={[
{ id: "edge", name: "Edge network", status: "operational" },
{ id: "deploy", name: "Deployment API", status: "degraded" },
{ id: "events", name: "Event delivery", status: "outage" },
]}
release={{
version: "v2.8.0",
title: "Regional failover controls",
href: "/releases/v2-8-0",
date: "2026-07-18",
}}
groups={[
{
heading: "Platform",
links: [
{ label: "Components", href: "/components" },
{ label: "Templates", href: "/templates" },
],
},
{
heading: "Company",
links: [
{ label: "About", href: "/about" },
{ label: "Contact", href: "/contact" },
],
},
]}
legal="© 2026 Arcfield Systems. All rights reserved."
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | required | Visible product or company name. |
| services | ReadonlyArray<{ id: string; name: string; status: "operational" | "degraded" | "outage" }> | required | One to six service states with unique ids. Every state is rendered as visible text. |
| release | { version: string; title: string; href: string; date: string } | required | Latest release summary with a real destination and valid YYYY-MM-DD date. |
| groups | ReadonlyArray<{ heading: string; links: ReadonlyArray<{ label: string; href: string }> }> | required | Two to five labelled sitemap groups containing real links. |
| legal | string | required | Visible copyright or legal line. |
| density | "comfortable" | "compact" | "comfortable" | Controls console and sitemap spacing. |
| pulseCadence | number | 2.8 | Operational marker cycle in seconds, clamped to 1.5-8. Zero disables the pulse. |
| revealStagger | number | 0.045 | Once-only entrance stagger in seconds, clamped to 0-0.12. |
| layout | "console-first" | "links-first" | "console-first" | Changes wide-screen column order through CSS grid without layout animation. |
| radius | number | 22 | Console radius in CSS pixels, clamped to 0-42. |
| className | string | undefined | Additional classes merged onto the semantic footer. |
Customisation
Status Console Footer exposes four Tier 3 colour tokens. By default the operational and warning markers are hue rotations of your destructive token, so all three health states track your theme in light and dark. Override any state independently, or change the console panel surface, while retaining the component's semantic structure and motion rules:
:root {
--status-console-operational: oklch(from var(--destructive) l c calc(h + 120));
--status-console-warning: oklch(from var(--destructive) l c calc(h + 55));
--status-console-outage: var(--destructive);
--status-console-panel: var(--card);
}Frequently asked questions
- Is Status Console Footer free for commercial use?
- Yes. Status Console Footer is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Status Console Footer accessible and performant?
- Yes. Every health state is written in visible text, links use native anchors with clear focus styles, and the release date uses a time element. Motion touches only transform and opacity, operational pulses stop offscreen or in hidden tabs, and reduced motion renders the complete footer statically.
- How do I customise the status colours and spacing?
- Use the four Tier 3 tokens to retheme the operational, degraded, outage, and panel colours. The density, pulseCadence, revealStagger, layout, and radius props control geometry and motion without changing the fixed status wording.