Fields
Social Links Field
PayloadCMS custom admin panel field for managing social media links with icon selection
Preview
import socialLinksField from "~/payload/fields/socialLinksField/config";
// Usage in PayloadCMS block/collection config
const socialMedia = socialLinksField({
name: "socialLinks",
label: "Social Media Links",
required: false,
});Props
The socialLinksField function accepts the following configuration options:
Prop
Type
Field Structure
Each social link entry contains:
- href (text, required): The URL for the social media profile
- icon (select, required): The social media platform icon to display
Supported social media platforms include: Facebook, Twitter, YouTube, LinkedIn, Telegram, Matrix, WhatsApp, Arc, Mastodon, Messenger, Instagram, X (formerly Twitter), TikTok, Reddit, and many more.
Installation
npx shadcn@latest add @uifoundry/social-links-fieldIf you encounter issues, check the registry setup guide for configuration help.
Registry Dependencies
This component uses the following registry components:
- Select Enum Field - Customizable enum select field component
- Field Types - TypeScript definitions for PayloadCMS fields
Dependencies
This component requires the following NPM packages:
- PayloadCMS - Headless CMS and application framework
- React - JavaScript library for building user interfaces
- @payloadcms/ui - PayloadCMS admin UI components
- lucide-react - Beautiful & consistent icon toolkit
Usage Examples
Basic Usage
import socialLinksField from "~/payload/fields/socialLinksField/config";
const ExampleBlock = {
slug: "example-block",
fields: [socialLinksField()],
};Custom Configuration
import socialLinksField from "~/payload/fields/socialLinksField/config";
const CustomSocialLinks = socialLinksField({
name: "companyLinks",
label: "Company Social Media",
required: false,
admin: {
description: "Add links to your company's social media profiles",
},
});In Frontend Components
import type { SocialIconKey } from "~/payload/fields/socialLinksField/config";
interface SocialLink {
href: string;
icon: SocialIconKey;
}
function SocialLinksComponent({ socialLinks }: { socialLinks: SocialLink[] }) {
return (
<div className="flex space-x-4">
{socialLinks.map((link, index) => (
<a
key={index}
href={link.href}
target="_blank"
rel="noopener noreferrer"
className="transition-opacity hover:opacity-75"
>
<SocialIcon icon={link.icon} />
</a>
))}
</div>
);
}