Command Center Hero
A free SaaS dashboard hero for React with layered depth and purposeful motion.
Ridgeline for platform teams
See every signal before it becomes a fire.
Ridgeline watches build health, deploy velocity and API latency together, and pages the right on-call eleven seconds after one of them slips.
Example data
Operations snapshot
Build health
99.98%
+0.4%
Status: Healthy
Deploy velocity
42
+8 this week
Status: On track
API latency
86 ms
-12 ms
Status: Healthy
Active incidents
0
No change
Status: Clear
Recent activity
Example timeline
- Release promotedWeb 8.4 moved into production.
- Checks completedAll 126 deployment checks passed.
- Latency recoveredEdge response time returned to baseline.
- Preview readyThe next release candidate is available.
Customise
Code
<HeroCommandCenter
title="See every signal before it becomes a fire."
description="Ridgeline watches build health, deploy velocity and API latency together."
primaryCta={{ label: "Connect a repo", href: "/connect" }}
secondaryCta={{ label: "See an incident", href: "/incidents" }}
signals={signals}
activity={activity}
/>Command Center Hero is a free hero section for Next.js and React that combines an accessible headline, real call-to-action links, static example signals, and a complete activity timeline. Tailwind handles the responsive layout while Motion adds a restrained entrance, layered depth, a pausable scan, and fine-pointer tilt.
It is designed for anyone searching for a SaaS dashboard hero React teams can install as a complete first screen. Every value, status, and activity row is present in the server HTML, the example data never pretends to update live, and reduced-motion or no-JavaScript visitors receive the same complete content without movement.
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/hero-command-centerUsage
import { HeroCommandCenter } from "@/components/hero-command-center";
const signals = [
{
id: "build-health",
label: "Build health",
value: "99.98%",
trend: "+0.4%",
status: "Healthy",
},
{
id: "deploy-velocity",
label: "Deploy velocity",
value: "42",
trend: "+8 this week",
status: "On track",
},
{
id: "api-latency",
label: "API latency",
value: "86 ms",
trend: "-12 ms",
status: "Healthy",
},
];
const activity = [
{
id: "release-promoted",
label: "Release promoted",
detail: "Web 8.4 moved into production.",
time: "2 min ago",
},
{
id: "checks-complete",
label: "Checks completed",
detail: "All 126 deployment checks passed.",
time: "8 min ago",
},
{
id: "preview-ready",
label: "Preview ready",
detail: "The next release candidate is available.",
time: "41 min ago",
},
];
export default function Page() {
return (
<HeroCommandCenter
eyebrow="Ridgeline for platform teams"
title="See every signal before it becomes a fire."
description="Ridgeline watches build health, deploy velocity and API latency together."
primaryCta={{ label: "Connect a repo", href: "/connect" }}
secondaryCta={{ label: "See an incident", href: "/incidents" }}
signals={signals}
activity={activity}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | undefined | Optional introductory label above the h1. |
| title | string | required | Hero headline rendered as the section's single h1. |
| description | string | required | Supporting hero copy. |
| primaryCta | { label: string; href: string } | required | Primary call to action rendered as a real anchor. |
| secondaryCta | { label: string; href: string } | undefined | Optional secondary call to action rendered as a real anchor. |
| signals | { id: string; label: string; value: string; trend?: string; status: string }[] | required | Three to six static dashboard signals with stable IDs. |
| activity | { id: string; label: string; detail: string; time: string }[] | required | Three to eight static activity rows with stable IDs. |
| layout | "copy-left" | "copy-right" | "copy-left" | Desktop composition. Narrow layouts always place copy first. |
| depth | number | 30 | Dashboard layer depth in CSS pixels, clamped from 8 to 56. |
| cadence | number | 5.5 | Seconds from the start of one scan pass to the next. |
| maxTilt | number | 4 | Fine-pointer dashboard tilt in degrees, clamped from 0 to 7. |
| revealStagger | number | 0.06 | Delay in seconds between signal and activity reveals. |
| scanWidth | number | 26 | Decorative scan width as a percentage. |
| radius | number | 24 | Dashboard corner radius in CSS pixels. |
| className | string | undefined | Additional classes merged onto the hero root. |
Customisation
Command Center Hero consumes semantic tokens for the page, structure, and focus ring. Its --te-command-surface and --te-command-muted component tokens fall back to this library's surface and muted colours, then to standard shadcn card and muted-foreground colours. The playground controls depth, cadence, tilt, reveal stagger, scan width, layout, and radius without turning preview wording into a component option:
.te-command-center {
--te-command-surface: var(--background);
--te-command-muted: var(--foreground);
}Frequently asked questions
- Is Command Center Hero free for commercial use?
- Yes. Command Center Hero is MIT licensed, so you can use it in personal and commercial projects without attribution.
- How does Command Center Hero handle performance and accessibility?
- The component renders one h1, real links, labelled lists, textual statuses, and time elements in the server HTML. Motion changes only transforms and opacity inside reserved space. The decorative scan pauses while offscreen or hidden, pointer tilt is installed only for fine pointers, and reduced motion disables entrances, scanning, and tilt.
- Can I customise the dashboard effect without editing its wording?
- Yes. Use the depth, cadence, maxTilt, revealStagger, scanWidth, layout, and radius props to tune the effect and geometry. Headline, CTA, signal, and activity data remain normal typed props in your code rather than playground text fields.