Product Preview Hero

Heroes

About

A developer-focused hero section with an interactive environment switcher, build telemetry, and live status badge. Useful for SaaS landing pages and DevTools.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Product Preview Hero to your project and fits it to your theme.

Code

How Product Preview Hero is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import ProductPreviewHero from "@/components/ui/product-preview-hero";

const defaultPreviews = [
  {
    id: "production",
    label: "Production",
    status: "Healthy",
    branch: "main · 8f32c1a",
    buildTime: "24s",
  },
  {
    id: "preview",
    label: "Preview",
    status: "Review ready",
    branch: "feat/new-dashboard · 42b8e0f",
    buildTime: "19s",
  },
  {
    id: "staging",
    label: "Staging",
    status: "Tests passing",
    branch: "release/2.8 · 94cafe2",
    buildTime: "22s",
  },
];

export default function ProductPreviewHeroDemo() {
  const [notice, setNotice] = React.useState("");

  return (
    <div className="w-full bg-background min-h-[540px] flex flex-col items-center justify-center p-4 sm:p-6">
      <ProductPreviewHero
        title="Ship something worth opening."
        description="A clear view of what changed, who reviewed it, and what is ready to go live across every deployment environment."
        actionLabel="Open environment"
        previews={defaultPreviews.map((p, i) => ({
          ...p,
          content: (
            <div className="flex flex-col gap-4">
              <div className="flex items-center justify-between">
                <strong className="text-sm font-semibold text-foreground">
                  Workspace overview
                </strong>
                <span className="text-xs text-muted-foreground">
                  Last 7 days
                </span>
              </div>
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
                {["Requests", "Latency", "Uptime"].map((label, j) => (
                  <div
                    key={label}
                    className="border border-border rounded-lg p-3.5 bg-background/60"
                  >
                    <p className="text-xs text-muted-foreground mb-1">
                      {label}
                    </p>
                    <strong className="text-xl font-bold text-foreground tracking-tight">
                      {[["128.4k", "42ms", "99.98%"], ["14.2k", "38ms", "100%"], ["64.1k", "40ms", "99.95%"]][i][j]}
                    </strong>
                  </div>
                ))}
              </div>
              <svg
                role="img"
                aria-label="Sample activity over seven days"
                viewBox="0 0 500 80"
                className="w-full h-20 text-primary"
              >
                <path
                  d={`M0 65L70 ${45 + i * 6}L140 52L210 25L280 38L350 12L420 20L500 5`}
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2.2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                />
              </svg>
              <p className="text-xs text-muted-foreground">
                Real-time telemetry · {p.label} environment
              </p>
            </div>
          ),
        }))}
        onAction={(id) =>
          setNotice(`Opened ${id} environment preview.`)
        }
      />
      {notice && (
        <p role="status" className="text-xs text-muted-foreground mt-2">
          {notice}
        </p>
      )}
    </div>
  );
}