# Integrations Grid

> Connectable services with installed states and monogram marks.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/integrations-grid).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/integrations-grid
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/integrations-grid-light-0e7c97a14c9f32c4.png
- Registry item: https://blockforge.terravidhal.me/r/integrations-grid.json
- Categories: integrations
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/integrations-grid.json
```

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

## Dependencies

- Registry items: `badge`, `button`

## Files

### `registry/blocks/integrations-grid.tsx`

```tsx
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";

const integrations = [
  { name: "GitHub", category: "Source control", installed: true },
  { name: "Slack", category: "Notifications", installed: true },
  { name: "Linear", category: "Issue tracking", installed: false },
  { name: "Datadog", category: "Observability", installed: false },
  { name: "Stripe", category: "Billing events", installed: false },
  { name: "Notion", category: "Docs sync", installed: false },
];

export default function IntegrationsGrid() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-5xl px-6 py-20 sm:py-24">
        <div className="mb-12 text-center">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            Plays well with your stack
          </h2>
          <p className="mt-2 text-muted-foreground">
            One-click connections — no YAML, no service accounts to babysit.
          </p>
        </div>

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {integrations.map((integration) => (
            <div
              key={integration.name}
              className="flex flex-col rounded-xl border border-border/60 bg-card p-5"
            >
              <div className="flex items-start justify-between gap-3">
                <span className="flex size-10 items-center justify-center rounded-lg border border-border/60 bg-background font-mono text-sm font-bold">
                  {integration.name.slice(0, 2)}
                </span>
                {integration.installed && (
                  <Badge variant="secondary" className="border border-border/60">
                    Connected
                  </Badge>
                )}
              </div>
              <h3 className="mt-4 text-sm font-semibold">{integration.name}</h3>
              <p className="mt-0.5 text-xs text-muted-foreground">
                {integration.category}
              </p>
              <div className="mt-4 border-t border-border/60 pt-4">
                <Button
                  size="sm"
                  variant={integration.installed ? "ghost" : "outline"}
                  className="w-full"
                >
                  {integration.installed ? "Manage" : "Connect"}
                </Button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
```