Banner Live Services Status

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/banner/banner38.tsx instead.

Usage

The file also exports banner38Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Banner38, banner38Demo } from "@/components/blocks/banner/banner38";

export default function Page() {
  return <Banner38 {...banner38Demo} />;
}

Props

Types

type ServiceCell = {
  name: string;
  status: "operational" | "degraded" | "outage";
};

Behavior notes

• This is the only live-status block in the category laid out as a grid; every other variant is a single row, which is the intentional distinction between this block and Live API Health or Live Integration Sync.
• The grid uses a 1px bg-border gap between cells to fake hairline dividers without adding individual borders to every cell.
• The overall summary line stays a single sentence on purpose, so the grid above it carries the detail and the sentence stays skimmable.

Frequently asked questions