# Community 1 - Centered invite with logo and outline social buttons

> A centered community section with a small logo, a two-line headline with a muted second line, and outline icon buttons for X, GitHub, and Discord.

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

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

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/community1.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`, `react-icons`
- Registry items: `button`

## Files

### `block/community1/community1.tsx`

```tsx
import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";
import { cn } from "cn";

import { Button } from "@/components/ui/button";
interface SocialLink {
  icon: React.ReactNode;
  url: string;
}

interface Community1Props {
  logo?: string;
  heading?: string;
  headingHighlight?: string;
  socialLinks?: SocialLink[];
  className?: string;
}

const Community1 = ({
  logo = "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/block-1.svg",
  heading = "Join our community",
  headingHighlight = "of designers & developers",
  socialLinks = [
    { icon: <FaXTwitter />, url: "https://x.com/shadcnblocks" },
    { icon: <FaGithub />, url: "https://github.com/shadcnblocks" },
    { icon: <FaDiscord />, url: "#" },
  ],
  className,
}: Community1Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center gap-5">
          <img src={logo} alt="logo" className="size-10" />
          <h2 className="text-center text-3xl font-semibold">
            {heading}
            <br />
            <span className="text-muted-foreground/80">{headingHighlight}</span>
          </h2>
          <div className="flex items-center gap-4">
            {socialLinks.map((link, index) => (
              <Button key={index} size="lg" variant="outline" asChild>
                <a href={link.url} target="_blank" className="size-10">
                  {link.icon}
                </a>
              </Button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Community1 };
```