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