Share Section
Social sharing buttons and link copy section. Install Share Section from the VLLNT UI registry with the shadcn CLI.
Social sharing buttons and link copy section. Part of the content family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
Add Share Section to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/share-section.jsonSource
import type { HeadingTag } from "../../lib/types";
export type SharePlatform =
| "bluesky"
| "facebook"
| "linkedin"
| "mastodon"
| "threads"
| "x";
export type PlatformConfig = {
key: SharePlatform;
label: string;
};
const defaultPlatforms: PlatformConfig[] = [
{ key: "x", label: "X" },
{ key: "linkedin", label: "LinkedIn" },
{ key: "facebook", label: "Facebook" },
{ key: "mastodon", label: "Mastodon" },
{ key: "bluesky", label: "Bluesky" },
{ key: "threads", label: "Threads" },
];
function buildShareUrl(
platform: SharePlatform,
url: string,
title: string,
): string {
const encodedUrl = encodeURIComponent(url);
const encodedTitle = encodeURIComponent(title);
switch (platform) {
case "x":
return `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`;
case "linkedin":
return `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`;
case "facebook":
return `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`;
case "mastodon":
return `https://mastodon.social/share?text=${encodedTitle}%20${encodedUrl}`;
case "bluesky":
return `https://bsky.app/intent/compose?text=${encodedTitle}%20${encodedUrl}`;
case "threads":
return `https://www.threads.net/intent/post?text=${encodedTitle}%20${encodedUrl}`;
}
}
type ShareSectionProps = {
/** Heading tag for the share title. Defaults to `h3`. */
as?: HeadingTag;
buildUrl?: (platform: SharePlatform, url: string, title: string) => string;
platforms?: PlatformConfig[];
shareOn: string;
shareTitle: string;
title: string;
url: string;
};
export function ShareSection({
as: Heading = "h3",
buildUrl: buildUrlFunction = buildShareUrl,
platforms = defaultPlatforms,
shareOn,
shareTitle,
title,
url,
}: ShareSectionProps) {
return (
<div className="border-t border-border pt-6 mt-8">
<Heading className="text-lg font-semibold mb-4">{shareTitle}</Heading>
<div className="flex flex-wrap gap-3">
{platforms.map((platform) => (
<a
className="text-sm text-muted-foreground hover:text-foreground transition-colors border border-border px-3 py-1.5 hover:bg-accent rounded-md"
href={buildUrlFunction(platform.key, url, title)}
key={platform.key}
rel="noopener noreferrer"
target="_blank"
>
{shareOn} {platform.label}
</a>
))}
</div>
</div>
);
}
Stories
Explore every variant and state in the interactive Storybook:
Preview
Switch between light and dark to inspect the embedded Storybook preview.