# Deployment status summary card

> Deployment status summary card

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-card-14).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-card-14
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-card-14-light-d63da16c86f094e4.png
- Registry item: https://reui.io/r/new-york-v4/c-card-14.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-card-14.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `cn`
- Registry items: `card`

## Files

### `c-card-14.tsx`

```tsx
import { cn } from "cn"
import { Card, CardContent } from "@/components/ui/card"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

const stats = [
  { label: "Environment", value: "Production" },
  { label: "Region", value: "us-east-1" },
  { label: "Version", value: "v2.4.0" },
  { label: "Status", value: "Healthy" },
]

export function Pattern() {
  return (
    <Card className="mx-auto w-full max-w-xs overflow-hidden p-0">
      <CardContent className="flex flex-col items-center p-0">
        {/* Header with gradient */}
        <div className="flex w-full flex-col items-center justify-center bg-linear-to-b from-fuchsia-50/80 to-transparent py-12">
          <div className="relative mb-6">
            <div className="absolute inset-0 scale-150 rounded-full bg-fuchsia-400/10 blur-2xl" />
            <IconPlaceholder
              lucide="SquareTerminalIcon"
              tabler="IconTerminal2"
              hugeicons="ComputerTerminal01Icon"
              phosphor="TerminalWindowIcon"
              remixicon="RiTerminalBoxLine"
              aria-hidden="true"
              className="relative size-16 text-fuchsia-600"
              strokeWidth={1.5}
            />
          </div>
          <h3 className="text-foreground text-lg font-semibold">
            Deployment Successful
          </h3>
          <p className="text-muted-foreground text-sm">Your app is now live</p>
        </div>

        {/* Status Rows */}
        <div className="w-full space-y-1 px-4 pb-6">
          {stats.map((item, index) => (
            <div
              key={item.label}
              className={cn(
                "rounded-lg flex items-center justify-between px-3 py-2.5",
                index % 2 === 0 && "bg-muted/40"
              )}
            >
              <span className="text-foreground text-sm font-medium">
                {item.label}
              </span>
              <span className="text-muted-foreground text-sm">
                {item.value}
              </span>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  )
}
```