import { SocialLogos } from "@/components/email/social-logos";
export function SquareTilesSocialLogosDemo() {
return <SocialLogos {...SocialLogos.PreviewProps} variant="square-tiles" />;
}Installation
$ pnpm dlx shadcn@latest add @emailcn/social-logos
Usage
import { SocialLogos } from "@/components/email/social-logos";
<SocialLogos variant="outlined-circle-tiles" />;Examples
Squared box
import { SocialLogos } from "@/components/email/social-logos";
export function SquaredBoxSocialLogosDemo() {
return <SocialLogos {...SocialLogos.PreviewProps} variant="squared-box" />;
}Circle tiles
import { SocialLogos } from "@/components/email/social-logos";
export function CircleTilesSocialLogosDemo() {
return <SocialLogos {...SocialLogos.PreviewProps} variant="circle-tiles" />;
}Pill box
import { SocialLogos } from "@/components/email/social-logos";
export function PillBoxSocialLogosDemo() {
return <SocialLogos {...SocialLogos.PreviewProps} variant="pill-box" />;
}Outlined square tiles
import { SocialLogos } from "@/components/email/social-logos";
export function OutlinedSquareTilesSocialLogosDemo() {
return (
<SocialLogos
{...SocialLogos.PreviewProps}
variant="outlined-square-tiles"
/>
);
}Outlined circle tiles
import { SocialLogos } from "@/components/email/social-logos";
export function OutlinedCircleTilesSocialLogosDemo() {
return (
<SocialLogos
{...SocialLogos.PreviewProps}
variant="outlined-circle-tiles"
/>
);
}Outlined box
import { SocialLogos } from "@/components/email/social-logos";
export function OutlinedBoxSocialLogosDemo() {
return <SocialLogos {...SocialLogos.PreviewProps} variant="outlined-box" />;
}Outlined pill box
import { SocialLogos } from "@/components/email/social-logos";
export function OutlinedPillBoxSocialLogosDemo() {
return (
<SocialLogos {...SocialLogos.PreviewProps} variant="outlined-pill-box" />
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "square-tiles" | "squared-box" | "circle-tiles" | "pill-box" | "outlined-square-tiles" | "outlined-circle-tiles" | "outlined-box" | "outlined-pill-box" | "square-tiles" | tile layout |
items | SocialLogoItem[] | icons | Social links and icon assets |
title | string | "Connect with us" | Section title |
description | string | copy | Supporting text |
theme | TailwindConfig | defaultTheme | Email theme configuration |