# Integrations 02

> A simple integrations block

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

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

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/integrations-02.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Files

### `src/registry/blocks/radix/integrations-02/components/integrations.tsx`

```tsx
import { ArrowUpRight } from "lucide-react";
import { Badge } from "@/registry/bases/radix/ui/badge";
import { Button } from "@/registry/bases/radix/ui/button";

export default function Integrations() {
  return (
    <div className="my-12 px-6 sm:my-14">
      <div className="mx-auto flex w-full max-w-md flex-col rounded-lg border bg-muted p-1 shadow-lg/2">
        <div className="rounded-md border bg-card p-6">
          <h2 className="font-medium text-2xl tracking-tight">
            Our Integrations
          </h2>
          <p className="mt-1.5 text-pretty text-muted-foreground">
            Connect your favorite tools and services and start using them in
            your app.
          </p>
          <div className="mx-auto mt-8 flex w-full flex-col gap-3">
            {integrations.map((integration) => (
              <div
                className="flex items-center gap-3 rounded-lg border bg-card px-3 py-3"
                key={integration.title}
              >
                <img
                  alt={integration.title}
                  className="size-8 rounded"
                  src={`https://www.google.com/s2/favicons?domain=${encodeURIComponent(integration.url)}&sz=64`}
                />
                <h3 className="font-medium">{integration.title}</h3>

                {integration.status === "connected" ? (
                  <Badge className="ms-auto h-7 min-w-26 rounded-lg bg-emerald-600/10 px-3 text-emerald-600 text-sm">
                    Connected
                  </Badge>
                ) : (
                  <Button
                    className="ms-auto h-7 min-w-26"
                    size="sm"
                    variant="outline"
                  >
                    Connect <ArrowUpRight />
                  </Button>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

const integrations = [
  {
    title: "PostHog",
    description: "PostHog is an open-source product analytics tool.",
    url: "https://posthog.com/",
    status: "connected",
  },
  {
    title: "Mailchimp",
    description:
      "Marketing platform for creating, sending, and automating emails.",
    url: "https://mailchimp.com",
  },
  {
    title: "Webflow",
    description: "Website builder for creating and managing websites.",
    url: "https://webflow.com/",
    status: "pending",
  },
  {
    title: "Stripe",
    description: "Payment processing for online businesses and platforms.",
    url: "https://stripe.com",
  },
  {
    title: "Sanity",
    description:
      "Content management system for creating and managing websites.",
    url: "https://sanity.io/",
    status: "pending",
  },
  {
    title: "Zapier",
    description:
      "Automation tool for connecting and syncing data between different apps and services.",
    url: "https://zapier.com",
  },
];
```