{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"integrations-grid","type":"registry:block","title":"Integrations Grid","description":"Connectable services with installed states and monogram marks.","categories":["integrations"],"dependencies":[],"registryDependencies":["badge","button"],"files":[{"path":"registry/blocks/integrations-grid.tsx","content":"import { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\nconst integrations = [\n  { name: \"GitHub\", category: \"Source control\", installed: true },\n  { name: \"Slack\", category: \"Notifications\", installed: true },\n  { name: \"Linear\", category: \"Issue tracking\", installed: false },\n  { name: \"Datadog\", category: \"Observability\", installed: false },\n  { name: \"Stripe\", category: \"Billing events\", installed: false },\n  { name: \"Notion\", category: \"Docs sync\", installed: false },\n];\n\nexport default function IntegrationsGrid() {\n  return (\n    <section className=\"bg-background\">\n      <div className=\"mx-auto w-full max-w-5xl px-6 py-20 sm:py-24\">\n        <div className=\"mb-12 text-center\">\n          <h2 className=\"text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n            Plays well with your stack\n          </h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            One-click connections — no YAML, no service accounts to babysit.\n          </p>\n        </div>\n\n        <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {integrations.map((integration) => (\n            <div\n              key={integration.name}\n              className=\"flex flex-col rounded-xl border border-border/60 bg-card p-5\"\n            >\n              <div className=\"flex items-start justify-between gap-3\">\n                <span className=\"flex size-10 items-center justify-center rounded-lg border border-border/60 bg-background font-mono text-sm font-bold\">\n                  {integration.name.slice(0, 2)}\n                </span>\n                {integration.installed && (\n                  <Badge variant=\"secondary\" className=\"border border-border/60\">\n                    Connected\n                  </Badge>\n                )}\n              </div>\n              <h3 className=\"mt-4 text-sm font-semibold\">{integration.name}</h3>\n              <p className=\"mt-0.5 text-xs text-muted-foreground\">\n                {integration.category}\n              </p>\n              <div className=\"mt-4 border-t border-border/60 pt-4\">\n                <Button\n                  size=\"sm\"\n                  variant={integration.installed ? \"ghost\" : \"outline\"}\n                  className=\"w-full\"\n                >\n                  {integration.installed ? \"Manage\" : \"Connect\"}\n                </Button>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block","target":"components/blocks/integrations/integrations-grid.tsx"}]}