# Integrations 1

A shadcn/ui block from the [@diarmuradi](https://diarmuradi.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/diarmuradi/integrations-1).

- Page, with a live preview: https://shadcn.exchange/r/diarmuradi/integrations-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/diarmuradi/integrations-1-light-a2f982a5b885dd75.png
- Registry item: https://diarmuradi.com/r/integrations-1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://diarmuradi.com/r/integrations-1.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: `https://diarmuradi.com/r/styles/base-nova/badge.json`, `https://diarmuradi.com/r/styles/base-nova/fancy-button.json`, `https://diarmuradi.com/r/styles/base-nova/icons.json`

## Files

### `integrations.tsx`

```tsx
"use client"

import { cn } from "cn"

import { Badge } from "@/components/ui/badge"
import { FancyButton } from "@/components/ui/fancy-button"
import { Icons } from "@/components/ui/icons"

type IntegrationItem = {
  label: string
  icon: React.ComponentType<React.HTMLAttributes<SVGElement>>
}

const columns: IntegrationItem[][] = [
  [{ icon: Icons.Cursor, label: "Cursor" }],
  [
    { icon: Icons.Gemini, label: "Gemini" },
    { icon: Icons.VisualStudioCode, label: "VS Code" },
  ],
  [
    { icon: Icons.Grok, label: "Grok" },
    { icon: Icons.MicrosoftCopilot, label: "Copilot" },
    { icon: Icons.OpenAI, label: "OpenAI" },
  ],
  [
    { icon: Icons.Shadcn, label: "shadcn/ui" },
    { icon: Icons.N8n, label: "n8n" },
  ],
  [
    { icon: Icons.Replit, label: "Replit" },
    { icon: Icons.DeepSeek, label: "DeepSeek" },
    { icon: Icons.Ollama, label: "Ollama" },
  ],
  [
    { icon: Icons.Windsurf, label: "Windsurf" },
    { icon: Icons.Anthropic, label: "Anthropic" },
  ],
  [{ icon: Icons.HumeAI, label: "Hume AI" }],
]

export function Integration() {
  return (
    <section
      aria-label="Integrations"
      className="flex items-center justify-center px-4"
    >
      <div className="flex w-full max-w-5xl flex-col items-center gap-8">
        <header className="flex flex-col items-center gap-2 text-center">
          <Badge variant="default" className="h-7 rounded-lg sm:h-8 sm:text-sm">
            Integrations
          </Badge>

          <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-5xl">
            Connect with the tools you love
          </h1>
          <p className="max-w-lg text-sm text-muted-foreground sm:text-base">
            Drop in your favorite AI tools and editors without touching a config
            file.
          </p>
        </header>

        <ul
          aria-label="Connected tools"
          className="flex w-full max-w-2xl list-none items-center justify-center gap-1.5 sm:gap-3"
        >
          {columns.map((column) => (
            <li key={column[0].label} className="min-w-0 flex-1">
              <ul className="flex list-none flex-col gap-1.5 sm:gap-3">
                {column.map((item) => (
                  <li key={item.label}>
                    <IntegrationIcon>
                      <item.icon aria-hidden="true" />
                    </IntegrationIcon>
                    <span className="sr-only">{item.label}</span>
                  </li>
                ))}
              </ul>
            </li>
          ))}
        </ul>

        <FancyButton size="lg">View all integrations</FancyButton>
      </div>
    </section>
  )
}

function IntegrationIcon({
  children,
  className,
}: {
  children: React.ReactNode
  className?: string
}) {
  return (
    <div
      className={cn(
        "flex aspect-square w-full items-center justify-center rounded-full bg-card shadow-elevated-2xs transition-shadow duration-300 hover:shadow-elevated-sm",
        className
      )}
    >
      <div className="flex size-1/2 items-center justify-center *:size-full">
        {children}
      </div>
    </div>
  )
}
```