Status Cards

Service status cards with icon badges, status labels, and uptime percentages.

Preview

Features

5 status types with semantic colors
Icon badges with colored backgrounds
Optional uptime percentage display
Loading skeleton state
Responsive grid container (2, 3, or 4 columns)
Dark mode support

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
status-card-grid.tsx	components/data/status-cards/status-card-grid.tsx
status-card.tsx	components/data/status-cards/status-card.tsx
types.ts	components/data/status-cards/types.ts
index.ts	components/data/status-cards/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Dependencies

Install these dependencies before using the component:

Terminal

bash

npm install @phosphor-icons/react

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. status-card-grid.tsx

status-card-grid.tsx

tsx

import { cn } from "@/lib/utils";
import type { StatusCardGridProps } from "./types";

const COLUMN_CLASSES = {
  2: "grid-cols-1 sm:grid-cols-2",

2. status-card.tsx

status-card.tsx

tsx

"use client";

import type { ComponentType } from "react";
import type { IconProps } from "@phosphor-icons/react";
import {

3. types.ts

types.ts

tsx

export type StatusType = "operational" | "degraded" | "partial" | "down" | "maintenance";

export interface StatusCardProps {
  name: string;
  description?: string;
  status: StatusType;
  uptime?: number;
  loading?: boolean;
}

export interface StatusCardGridProps {
  children: React.ReactNode;
  columns?: 2 | 3 | 4;
}

4. index.ts

index.ts

tsx

export { StatusCard } from "./status-card";
export { StatusCardGrid } from "./status-card-grid";
export type { StatusType, StatusCardProps, StatusCardGridProps } from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/status.tsx

tsx

import { StatusCard, StatusCardGrid } from "@/components/data/status-cards";

function StatusPage() {
  return (
    <StatusCardGrid columns={3}>
      <StatusCard name="API" status="operational" uptime={99.9} />
      <StatusCard name="Database" status="operational" uptime={99.8} />
      <StatusCard name="CDN" status="degraded" uptime={98.5} />
    </StatusCardGrid>
  );
}

StatusCard Props

Prop	Type	Default
name	string	required
description	string	-
status	StatusType	required
uptime	number	-
loading	boolean	false

Status Types

Status	Icon	Color
operational	CheckCircle2	Emerald
degraded	AlertCircle	Yellow
partial	AlertTriangle	Orange
down	XCircle	Red
maintenance	Wrench	Blue