A collection of beautifully designed, accessible, and customizable email components for React Email, MJML React, and JSX Email. Works with shadcn/ui.

How do I use emailcn?

Use npx shadcn@latest add with our registry URL to install components and blocks. Themes, components, and blocks are all installable via the shadcn CLI.

Is emailcn open source?

Yes. The source is on GitHub and released under the MIT License.

Social Links

Social Links rendered with email-safe, renderer-native components.

React Email MJML React JSX Email

import { SocialLinks } from "@/components/email/social-links";
import { defaultTheme } from "@/components/email/theme-default";

export function SocialLinksDemo() {
  return (
    <SocialLinks
      presentation="icons"
      container="none"
      theme={{ ...defaultTheme, containerWidth: "640px" }}
    />
  );
}

Installation


$ pnpm dlx shadcn@latest add @emailcn/jsx-email/social-links

Usage

import { SocialLinks } from "@/components/email/social-links";

<SocialLinks presentation="icons" container="none" direction="inline" />

Examples

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationIconsContainerNoneExampleDemo() {
  return <SocialLinks presentation="icons" container="none" />;
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadExampleDemo() {
  return <SocialLinks content="lead" presentation="icons" container="none" />;
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitleExampleDemo() {
  return <SocialLinks content="title" presentation="icons" container="none" />;
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalExampleDemo() {
  return (
    <SocialLinks content="minimal" presentation="icons" container="none" />
  );
}

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationIconsContainerTileShapeSquareExampleDemo() {
  return <SocialLinks presentation="icons" container="tile" shape="square" />;
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationIconsContainerTileShapeSquareExampleDemo() {
  return (
    <SocialLinks
      content="lead"
      presentation="icons"
      container="tile"
      shape="square"
    />
  );
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationIconsContainerTileShapeSquareExampleDemo() {
  return (
    <SocialLinks
      content="title"
      presentation="icons"
      container="tile"
      shape="square"
    />
  );
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationIconsContainerTileShapeSquareExampleDemo() {
  return (
    <SocialLinks
      content="minimal"
      presentation="icons"
      container="tile"
      shape="square"
    />
  );
}

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationIconsContainerTileShapeCircleExampleDemo() {
  return <SocialLinks presentation="icons" container="tile" shape="circle" />;
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationIconsContainerTileShapeCircleExampleDemo() {
  return (
    <SocialLinks
      content="lead"
      presentation="icons"
      container="tile"
      shape="circle"
    />
  );
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationIconsContainerTileShapeCircleExampleDemo() {
  return (
    <SocialLinks
      content="title"
      presentation="icons"
      container="tile"
      shape="circle"
    />
  );
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationIconsContainerTileShapeCircleExampleDemo() {
  return (
    <SocialLinks
      content="minimal"
      presentation="icons"
      container="tile"
      shape="circle"
    />
  );
}

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationIconsContainerTileShapeSquareOutlinedExampleDemo() {
  return (
    <SocialLinks
      presentation="icons"
      container="tile"
      shape="square"
      outlined
    />
  );
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationIconsContainerTileShapeSquareOutlinedExampleDemo() {
  return (
    <SocialLinks
      content="lead"
      presentation="icons"
      container="tile"
      shape="square"
      outlined
    />
  );
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationIconsContainerTileShapeSquareOutlinedExampleDemo() {
  return (
    <SocialLinks
      content="title"
      presentation="icons"
      container="tile"
      shape="square"
      outlined
    />
  );
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationIconsContainerTileShapeSquareOutlinedExampleDemo() {
  return (
    <SocialLinks
      content="minimal"
      presentation="icons"
      container="tile"
      shape="square"
      outlined
    />
  );
}

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationIconsContainerTileShapeCircleOutlinedExampleDemo() {
  return (
    <SocialLinks
      presentation="icons"
      container="tile"
      shape="circle"
      outlined
    />
  );
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationIconsContainerTileShapeCircleOutlinedExampleDemo() {
  return (
    <SocialLinks
      content="lead"
      presentation="icons"
      container="tile"
      shape="circle"
      outlined
    />
  );
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationIconsContainerTileShapeCircleOutlinedExampleDemo() {
  return (
    <SocialLinks
      content="title"
      presentation="icons"
      container="tile"
      shape="circle"
      outlined
    />
  );
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationIconsContainerTileShapeCircleOutlinedExampleDemo() {
  return (
    <SocialLinks
      content="minimal"
      presentation="icons"
      container="tile"
      shape="circle"
      outlined
    />
  );
}

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationIconsContainerBoxExampleDemo() {
  return <SocialLinks presentation="icons" container="box" />;
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationIconsContainerBoxExampleDemo() {
  return <SocialLinks content="lead" presentation="icons" container="box" />;
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationIconsContainerBoxExampleDemo() {
  return <SocialLinks content="title" presentation="icons" container="box" />;
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationIconsContainerBoxExampleDemo() {
  return <SocialLinks content="minimal" presentation="icons" container="box" />;
}

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationIconsContainerBoxOutlinedExampleDemo() {
  return <SocialLinks presentation="icons" container="box" outlined />;
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationIconsContainerBoxOutlinedExampleDemo() {
  return (
    <SocialLinks content="lead" presentation="icons" container="box" outlined />
  );
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationIconsContainerBoxOutlinedExampleDemo() {
  return (
    <SocialLinks
      content="title"
      presentation="icons"
      container="box"
      outlined
    />
  );
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationIconsContainerBoxOutlinedExampleDemo() {
  return (
    <SocialLinks
      content="minimal"
      presentation="icons"
      container="box"
      outlined
    />
  );
}

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationIconsContainerPillExampleDemo() {
  return <SocialLinks presentation="icons" container="pill" />;
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationIconsContainerPillExampleDemo() {
  return <SocialLinks content="lead" presentation="icons" container="pill" />;
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationIconsContainerPillExampleDemo() {
  return <SocialLinks content="title" presentation="icons" container="pill" />;
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationIconsContainerPillExampleDemo() {
  return (
    <SocialLinks content="minimal" presentation="icons" container="pill" />
  );
}

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationIconsContainerPillOutlinedExampleDemo() {
  return <SocialLinks presentation="icons" container="pill" outlined />;
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationIconsContainerPillOutlinedExampleDemo() {
  return (
    <SocialLinks
      content="lead"
      presentation="icons"
      container="pill"
      outlined
    />
  );
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationIconsContainerPillOutlinedExampleDemo() {
  return (
    <SocialLinks
      content="title"
      presentation="icons"
      container="pill"
      outlined
    />
  );
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationIconsContainerPillOutlinedExampleDemo() {
  return (
    <SocialLinks
      content="minimal"
      presentation="icons"
      container="pill"
      outlined
    />
  );
}

Socials with inline labels

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationLabelsContainerNoneDirectionInlineExampleDemo() {
  return (
    <SocialLinks presentation="labels" container="none" direction="inline" />
  );
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationLabelsContainerNoneDirectionInlineExampleDemo() {
  return (
    <SocialLinks
      content="lead"
      presentation="labels"
      container="none"
      direction="inline"
    />
  );
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationLabelsContainerNoneDirectionInlineExampleDemo() {
  return (
    <SocialLinks
      content="title"
      presentation="labels"
      container="none"
      direction="inline"
    />
  );
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationLabelsContainerNoneDirectionInlineExampleDemo() {
  return (
    <SocialLinks
      content="minimal"
      presentation="labels"
      container="none"
      direction="inline"
    />
  );
}

Socials with stacked labels

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationLabelsContainerNoneDirectionStackedExampleDemo() {
  return (
    <SocialLinks presentation="labels" container="none" direction="stacked" />
  );
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationLabelsContainerNoneDirectionStackedExampleDemo() {
  return (
    <SocialLinks
      content="lead"
      presentation="labels"
      container="none"
      direction="stacked"
    />
  );
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationLabelsContainerNoneDirectionStackedExampleDemo() {
  return (
    <SocialLinks
      content="title"
      presentation="labels"
      container="none"
      direction="stacked"
    />
  );
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationLabelsContainerNoneDirectionStackedExampleDemo() {
  return (
    <SocialLinks
      content="minimal"
      presentation="labels"
      container="none"
      direction="stacked"
    />
  );
}

Socials with inline tile labels

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationLabelsContainerTileDirectionInlineExampleDemo() {
  return (
    <SocialLinks presentation="labels" container="tile" direction="inline" />
  );
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationLabelsContainerTileDirectionInlineExampleDemo() {
  return (
    <SocialLinks
      content="lead"
      presentation="labels"
      container="tile"
      direction="inline"
    />
  );
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationLabelsContainerTileDirectionInlineExampleDemo() {
  return (
    <SocialLinks
      content="title"
      presentation="labels"
      container="tile"
      direction="inline"
    />
  );
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationLabelsContainerTileDirectionInlineExampleDemo() {
  return (
    <SocialLinks
      content="minimal"
      presentation="labels"
      container="tile"
      direction="inline"
    />
  );
}

Socials with stacked tile labels

Full

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksPresentationLabelsContainerTileDirectionStackedExampleDemo() {
  return (
    <SocialLinks presentation="labels" container="tile" direction="stacked" />
  );
}

With lead

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentLeadPresentationLabelsContainerTileDirectionStackedExampleDemo() {
  return (
    <SocialLinks
      content="lead"
      presentation="labels"
      container="tile"
      direction="stacked"
    />
  );
}

With title

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentTitlePresentationLabelsContainerTileDirectionStackedExampleDemo() {
  return (
    <SocialLinks
      content="title"
      presentation="labels"
      container="tile"
      direction="stacked"
    />
  );
}

Minimal

import { SocialLinks } from "@/components/email/social-links";

export function SocialLinksContentMinimalPresentationLabelsContainerTileDirectionStackedExampleDemo() {
  return (
    <SocialLinks
      content="minimal"
      presentation="labels"
      container="tile"
      direction="stacked"
    />
  );
}

API Reference

Prop	Type	Default	Description
`theme`	`EmailTheme`	`defaultTheme`	Renderer theme configuration.
`content`	`"full" \| "lead" \| "title" \| "minimal"`	`"full"`	Controls whether the title and lead copy are displayed.
`title`	`string`	`"Connect with us"`	Configures the component's title.
`description`	`string`	`"Stay in the loop by following us across our social channels for updates, news, and behind-the-scenes moments."`	Configures the component's description.
`items`	`Array<{ label?: string; href: string; icon: { alt?: string; src: string } }>`	Built-in items	Configures the component's items.
`presentation`	`"icons" \| "labels"`	`"icons"`	Configures the component's presentation.
`container`	`"none" \| "tile" \| "box" \| "pill"`	`"none"`	Configures the component's container.
`shape`	`"square" \| "circle"`	`"square"`	Configures the component's shape.
`outlined`	`boolean`	`false`	Configures the component's outlined.
`direction`	`"inline" \| "stacked"`	`"inline"`	Configures the component's direction.

Purchase Stats

Edit this page Follow @shadcnlabs Join community

Social Links

Installation

Usage

Examples

Simple social logos row

Full

With lead

With title

Minimal

Square tiles social logos

Full

With lead

With title

Minimal

Circle tiles social logos

Full

With lead

With title

Minimal

Outlined square tiles social logos

Full

With lead

With title

Minimal

Outlined circle tiles social logos

Full

With lead

With title

Minimal

Squared box social logos

Full

With lead

With title

Minimal

Outlined box social logos

Full

With lead

With title

Minimal

Pill box social logos

Full

With lead

With title

Minimal

Outlined pill box social logos

Full

With lead

With title

Minimal

Socials with inline labels

Full

With lead

With title

Minimal

Socials with stacked labels

Full

With lead

With title

Minimal

Socials with inline tile labels

Full

With lead

With title

Minimal

Socials with stacked tile labels

Full

With lead

With title

Minimal

API Reference