A modern, interactive social media card component with engagement features. Supports dark mode, animations, and customizable content.
Features: • Interactive engagement buttons (like, comment, share, bookmark) • Link preview with custom icon • Animated interactions • Dark mode support • Responsive design • Customizable styling • TypeScript support
import { SocialCard } from "@/components/ui/social-card";
import { Link as LinkIcon } from "lucide-react";
import { useState } from "react";
export function SocialCardDemo() {
const [cards, setCards] = useState([
{
id: 1,
author: {
name: "Dorian Baffier",
username: "dorian_baffier",
avatar:
"https://cdn.21st.dev/assets/localized/48105a02b5748bd2d7c738bc9b4b9ec468fe09c6f69f59d947eed2fdf03dc234.jpg",
timeAgo: "2h ago",
},
content: {
text: "Just launched Kokonut UI! Check out the documentation and let me know what you think 🎨",
link: {
title: "Kokonut UI Documentation",
description: "A comprehensive guide to Kokonut UI",
icon: <LinkIcon className="w-5 h-5 text-blue-500" />,
},
},
engagement: {
likes: 128,
comments: 32,
shares: 24,
isLiked: false,
isBookmarked: false,
},
},
]);
const handleAction = (id: number, action: string) => {
console.log(`Card ${id}: ${action}`);
};
return (
<div className="space-y-8">
<div>
{cards.map((card) => (
<SocialCard
key={card.id}
{...card}
onLike={() => handleAction(card.id, "liked")}
onComment={() => handleAction(card.id, "commented")}
onShare={() => handleAction(card.id, "shared")}
onBookmark={() => handleAction(card.id, "bookmarked")}
onMore={() => handleAction(card.id, "more")}
/>
))}
</div>
</div>
);
}
export default SocialCardDemo;
Part of Kokonut UI — browse the full library on 21st.dev.