import { SocialsWithLabels } from "@/components/email/socials-with-labels";
export function SocialsWithLabelsStackedDemo() {
return (
<SocialsWithLabels {...SocialsWithLabels.PreviewProps} variant="stacked" />
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/socials-with-labels
Usage
import { SocialsWithLabels } from "@/components/email/socials-with-labels";
<SocialsWithLabels variant="inline" />;Examples
Inline
import { SocialsWithLabels } from "@/components/email/socials-with-labels";
export function SocialsWithInlineLabelsDemo() {
return (
<SocialsWithLabels {...SocialsWithLabels.PreviewProps} variant="inline" />
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "stacked" | "inline" | "stacked" | Label arrangement |
items | LabeledSocialItem[] | icons | Social links, labels, icons |
title | string | "Connect with us" | Section title |
description | string | copy | Supporting text |
theme | TailwindConfig | defaultTheme | Email theme configuration |