# Social Connect Launch

> Coming soon section featuring social media links with icons for Twitter, GitHub, LinkedIn, and Email in pill-style buttons. Perfect for building a community and keeping followers engaged before launch.

A shadcn/ui block from the [@beste-ui](https://ui.beste.co) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/beste-ui/comingsoon3).

- Page, with a live preview: https://shadcn.exchange/r/beste-ui/comingsoon3
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/beste-ui/comingsoon3-light-02c2d1d05b7cf29a.png
- Registry item: https://ui.beste.co/r/comingsoon3.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.beste.co/r/comingsoon3.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: `clsx`, `lucide-react`, `tailwind-merge`
- Registry items: `badge`

## Files

### `registry/comingsoon3/comingsoon3.tsx`

```tsx
"use client";

import { Github, Linkedin, Mail, Twitter } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import Link from "next/link";
import { cn } from "@/lib/utils";

interface SocialLink {
  icon?: React.ReactNode;
  label: string;
  href?: string;
}

interface ComingSoon3Props {
  badge?: {
    label: string;
    variant?: "default" | "secondary" | "outline";
  };
  heading?: string;
  description?: string;
  socialHeading?: string;
  socialLinks?: SocialLink[];
  className?: string;
}

export const comingsoon3Demo: ComingSoon3Props = {
  badge: { label: "Launching Soon", variant: "secondary" },
  heading: "Stay connected",
  description:
    "Follow us on social media to get the latest updates and be the first to know when we launch.",
  socialHeading: "Find us on",
  socialLinks: [
    {
      icon: <Twitter className="size-5" />,
      label: "Twitter",
      href: "https://x.com/withbeste",
    },
    {
      icon: <Github className="size-5" />,
      label: "GitHub",
      href: "#",
    },
    {
      icon: <Linkedin className="size-5" />,
      label: "LinkedIn",
      href: "#",
    },
    {
      icon: <Mail className="size-5" />,
      label: "Email",
      href: "#",
    },
  ],
};

export function ComingSoon3({
  badge,
  heading,
  description,
  socialHeading,
  socialLinks = [],
  className,
}: ComingSoon3Props) {
  return (
    <section className={cn("py-16 md:py-24 w-full", className)}>
      <div className="mx-auto max-w-4xl px-4 md:px-6">
        <div className="flex flex-col items-center text-center gap-6 md:gap-8">
          {badge && (
            <div>
              <Badge variant={badge.variant ?? "default"}>{badge.label}</Badge>
            </div>
          )}

          {heading && (
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-balance max-w-4xl">
              {heading}
            </h2>
          )}

          {description && (
            <p className="text-lg md:text-xl text-balance max-w-2xl text-muted-foreground">
              {description}
            </p>
          )}

          {socialLinks.length > 0 && (
            <div className="mt-6">
              {socialHeading && (
                <div className="text-sm font-medium mb-4 uppercase tracking-wider text-muted-foreground">
                  {socialHeading}
                </div>
              )}

              <div className="flex flex-wrap justify-center gap-4">
                {socialLinks.map((social, index) => {
                  const content = (
                    <span className="flex items-center gap-3">
                      {social.icon && (
                        <span className="transition-transform group-hover:scale-110">
                          {social.icon}
                        </span>
                      )}
                      <span className="font-medium">{social.label}</span>
                    </span>
                  );

                  const linkClassName = cn(
                    "group flex items-center gap-3 px-6 py-3 rounded-full transition-all duration-300",
                    "bg-muted hover:bg-muted/80"
                  );

                  if (social.href) {
                    return (
                      <Link
                        key={index}
                        href={social.href}
                        className={linkClassName}
                      >
                        {content}
                      </Link>
                    );
                  }

                  return (
                    <div key={index} className={linkClassName}>
                      {content}
                    </div>
                  );
                })}
              </div>
            </div>
          )}

          <div className="mt-4 flex items-center gap-2 text-sm text-muted-foreground">
            <span className="inline-block w-2 h-2 rounded-full animate-pulse bg-green-500" />
            <span>Launching soon</span>
          </div>
        </div>
      </div>
    </section>
  );
}
```