# Integrations grid

> Twelve integrations in a hairline grid, next to a sticky header and a link to the full list.

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

- Page, with a live preview: https://shadcn.exchange/r/balick/integrations-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/balick/integrations-01-light-16243db4150e4bcb.png
- Registry item: https://ui.balick.me/r/integrations-01.json
- Categories: integrations
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.balick.me/r/integrations-01.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: `lucide-react`
- Registry items: `https://ui.balick.me/r/section.json`

## Files

### `registry/balick/blocks/integrations-01/integrations-01.tsx`

```tsx
import {
  ArrowRight,
  BarChart3,
  Bell,
  CreditCard,
  Database,
  HardDrive,
  KeyRound,
  Mail,
  MessageSquare,
  Activity,
  PenTool,
  Webhook,
  Workflow,
} from "lucide-react"

import { Section, SectionHeader } from "@/registry/balick/ui/section"

const header = {
  eyebrow: "Integrations",
  title: "Works with the tools you already use.",
  description:
    "Connect your stack in a few clicks. Data flows both ways, and every integration is included on every plan.",
}

const all = { label: "Browse all integrations", href: "#" }

const integrations = [
  { name: "Atlas", category: "Database", icon: Database },
  { name: "Ledger", category: "Payments", icon: CreditCard },
  { name: "Relay", category: "Messaging", icon: MessageSquare },
  { name: "Parcel", category: "Email", icon: Mail },
  { name: "Beacon", category: "Analytics", icon: BarChart3 },
  { name: "Pulse", category: "Monitoring", icon: Activity },
  { name: "Vault", category: "Secrets", icon: KeyRound },
  { name: "Harbor", category: "Storage", icon: HardDrive },
  { name: "Forge", category: "Automation", icon: Workflow },
  { name: "Canvas", category: "Design", icon: PenTool },
  { name: "Signal", category: "Alerts", icon: Bell },
  { name: "Hooks", category: "Webhooks", icon: Webhook },
]

export function Integrations01({ id = "integrations" }: { id?: string }) {
  return (
    <Section id={id}>
      <div className="grid grid-cols-1 gap-12 lg:grid-cols-[1fr_1.5fr] lg:gap-16">
        <div className="lg:sticky lg:top-24 lg:self-start">
          <SectionHeader {...header} align="left">
            <a href={all.href} className="group inline-flex items-center gap-1 text-sm font-medium">
              {all.label}
              <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
            </a>
          </SectionHeader>
        </div>
        <div className="overflow-hidden rounded-2xl border bg-card">
          <ul className="-mr-px -mb-px grid grid-cols-2 sm:grid-cols-3">
            {integrations.map(({ name, category, icon: Icon }) => (
              <li
                key={name}
                className="flex flex-col items-center gap-3 border-r border-b px-4 py-8 text-center transition-colors hover:bg-muted/30"
              >
                <span className="flex size-12 items-center justify-center rounded-xl border bg-card shadow-xs">
                  <Icon className="size-5" aria-hidden />
                </span>
                <span className="flex flex-col">
                  <span className="text-sm font-medium">{name}</span>
                  <span className="text-xs text-muted-foreground">{category}</span>
                </span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </Section>
  )
}
```