# Integration 3 - Simple integration list

> A centered vertical list of integrations showing icons, titles, and descriptions in a single-column layout.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/integration3).

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

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/integration3.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`

## Files

### `block/integration3/integration3.tsx`

```tsx
import React from "react";
import { cn } from "cn";

const DATA = [
  {
    id: 1,
    icon: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/google-icon.svg",
    title: "Google Sheets",
    description:
      "Easily sync your data with Google Sheets for seamless automation.",
  },
  {
    id: 2,
    icon: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/slack-icon.svg",
    title: "Slack",
    description:
      "Receive updates and notifications directly in your Slack channels.",
  },
  {
    id: 3,
    icon: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/sketch-icon.svg",
    title: "Sketch",
    description:
      "Import your designs from Sketch and streamline your design process",
  },
  {
    id: 4,
    icon: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/gatsby-icon.svg",
    title: "Gatsby",
    description: "Build blazing-fast websites with Gatsby integration.",
  },
  {
    id: 5,
    icon: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/spotify-icon.svg",
    title: "Shopify",
    description:
      "Sync your Shopify store data and streamline order management.",
  },
  {
    id: 6,
    icon: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/github-icon.svg",
    title: "Github",
    description:
      "Automate your workflows and track changes with Github integration.",
  },
];

interface Integration3Props {
  className?: string;
}

const Integration3 = ({ className }: Integration3Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex flex-col items-center text-center">
          <div className="flex max-w-5xl flex-col items-center text-center">
            <h1 className="my-6 text-4xl font-bold text-pretty lg:text-6xl">
              Integrations
            </h1>
            <h2 className="mb-8 max-w-3xl text-muted-foreground lg:text-2xl">
              Connect your favourite apps to your workflow.
            </h2>
          </div>

          <div className="flex flex-col justify-center gap-4">
            {DATA.map(({ id, icon, title, description }) => (
              <div key={id} className="flex items-center gap-4 py-4">
                <div className="h-12 w-12 flex-shrink-0">
                  <img
                    src={icon}
                    alt={title}
                    width={48}
                    height={48}
                    className="h-full w-full object-contain"
                  />
                </div>
                <div className="text-left">
                  <div className="text-lg font-semibold">{title}</div>
                  <div className="text-sm text-muted-foreground">
                    {description}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Integration3 };
```