# Integrations 1

> Grid layout with integration cards and view all link.

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

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

## Install

```bash
npx shadcn@latest add https://efferd.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

- Registry items: `button`

## Files

### `registry/blocks/integrations/1/integrations.tsx`

```tsx
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

type Integration = {
	src: string;
	name: string;
	description: string;
	isInvertable?: boolean;
};

const data: Integration[] = [
	{
		src: "https://storage.efferd.com/logo/vercel.svg",
		name: "Vercel",
		description: "Amet praesentium deserunt ex commodi tempore fuga....",
		isInvertable: true,
	},
	{
		src: "https://storage.efferd.com/logo/openai.svg",
		name: "OpenAI",
		description: "Amet praesentium deserunt ex commodi tempore fuga....",
		isInvertable: true,
	},
	{
		src: "https://storage.efferd.com/logo/supabase.svg",
		name: "Supabase",
		description: "Amet praesentium deserunt ex commodi tempore fuga....",
	},
	{
		src: "https://storage.efferd.com/logo/notion.svg",
		name: "Notion",
		description: "Amet praesentium deserunt ex commodi tempore fuga....",
	},
];

export function Integrations() {
	return (
		<div
			className={cn(
				"mx-auto grid max-w-5xl gap-1 overflow-hidden rounded-md bg-secondary p-1 sm:grid-cols-2 lg:grid-cols-4 dark:bg-secondary/50"
			)}
		>
			{data.map((item) => (
				<div
					className={cn(
						"group relative flex flex-col justify-between gap-2 rounded-md bg-background p-6 shadow-sm"
					)}
					key={item.name}
				>
					<img
						alt={item.name}
						className={cn(
							"pointer-events-none size-8 shrink-0 select-none object-contain",
							item.isInvertable && "dark:invert"
						)}
						height={32}
						src={item.src}
						width={32}
					/>
					<div className="space-y-1">
						<h3 className="font-heading font-semibold">{item.name}</h3>
						<p className="text-muted-foreground text-xs md:text-sm">
							{item.description}
						</p>
					</div>
				</div>
			))}
			<div className="relative flex items-center justify-center p-1 sm:col-span-2 lg:col-span-4">
				<Button asChild className="group text-xs" size="sm" variant="link">
					<a href="#">
						View all integrations
						<IconPlaceholder
							data-icon="inline-end"
							hugeicons="ArrowUpRight01Icon"
							lucide="ArrowUpRightIcon"
							phosphor="ArrowUpRightIcon"
							remixicon="RiArrowRightUpLine"
							tabler="IconArrowUpRight"
						/>
					</a>
				</Button>
			</div>
		</div>
	);
}
```