Cards

Integration Status Grid

A three-column status grid for connected services, deploy targets, and docs sync.

integrationstatusdashboard

Installation

Copy and paste the code into your project.

Accessibility notes

Pair every status dot with a visible service name and state label.

GitHub

synced

Vercel

live

Docs

ready

Preview accent

TypeScript

const integrations = [
  { name: "GitHub", state: "synced" },
  { name: "Vercel", state: "live" },
  { name: "Docs", state: "ready" },
];

export function IntegrationStatusGrid() {
  return (
    <div className="grid w-full max-w-sm grid-cols-3 gap-2">
      {integrations.map((integration) => (
        <div key={integration.name} className="rounded-lg border border-[#40E0D0]/20 bg-[#40E0D0]/8 p-4 text-center shadow-xl">
          <span className="mx-auto block h-2.5 w-2.5 rounded-full bg-[#40E0D0] shadow-[0_0_14px_rgba(64,224,208,0.7)]" />
          <p className="mt-3 text-sm font-bold text-white">{integration.name}</p>
          <p className="mt-1 text-xs text-slate-400">{integration.state}</p>
        </div>
      ))}
    </div>
  );
}

Usage

<IntegrationStatusGrid />

Related components

Command palette

⌘K

Generate dashboard layout

3 actions ready · 1 agent online

Cards

Glass Command Card

Beginner

A glassmorphism command card for product shortcuts, palettes, and agent actions.

glasscommandshortcut

View component

Prompt tuned

Badges

Prompt Badge

Beginner

A small status badge for prompt state, tuning, review, or evaluation labels.

promptstatusbadge

View component

Loaders

Glow Loader

Beginner

A three-dot animated loader with turquoise, violet, and warm orange glow accents.

loaderanimationstatus

View component