# LinkedIn Post > LinkedIn post card with professional styling. A shadcn/ui block from the [@manifest](https://ui.manifest.build) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/manifest/linkedin-post). - Page, with a live preview: https://shadcn.exchange/r/manifest/linkedin-post - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/manifest/linkedin-post-light-38e19fa8bf5acf65.png - Registry item: https://ui.manifest.build/r/linkedin-post.json - Categories: social - Listed: 2026-10-13, source last changed 2026-10-13 ## Install ```bash npx shadcn@latest add https://ui.manifest.build/r/linkedin-post.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react` ## Files ### `registry/social/linkedin-post.tsx` ````tsx 'use client'; import { Repeat2 } from 'lucide-react'; import type { JSX } from 'react'; import React, { useEffect, useRef, useState } from 'react'; import { demoLinkedInPost } from './demo/social'; /** Reaction type for LinkedIn posts */ type ReactionType = 'like' | 'celebrate' | 'support' | 'love' | 'insightful' | 'funny'; /** * ═══════════════════════════════════════════════════════════════════════════ * LinkedInPostProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for the LinkedInPost component, which displays a LinkedIn-style * post with professional author info. */ export interface LinkedInPostProps { data?: { /** Author's display name. */ author?: string; /** Author's professional headline or title. */ headline?: string; /** Avatar letter fallback or image URL for the profile picture. */ avatar?: string; /** Post text content (supports line breaks and hashtags). */ content?: string; /** Time since posted (e.g., "2h"). */ time?: string; /** Optional image URL for the post. */ image?: string; /** Number of reactions (e.g., "1,234" or "1.2K"). */ reactions?: string; /** Top reaction types to display (max 3 icons shown). */ topReactions?: ReactionType[]; /** Number of comments (e.g., "56"). */ comments?: string; /** Number of reposts (e.g., "12"). */ reposts?: string; /** URL to the original LinkedIn post. If provided, shows the LinkedIn icon. */ postUrl?: string; /** URL for the repost action. If provided, shows the repost button in footer. */ repostUrl?: string; }; appearance?: { /** Maximum number of lines to show before truncating. @default 3 */ maxLines?: number; }; } /** Parses content and styles hashtags and links */ function formatContent(content: string): React.ReactNode[] { // Regex to match hashtags and URLs const pattern = /(#\w+)|(https?:\/\/[^\s]+)/g; const parts: React.ReactNode[] = []; let lastIndex = 0; let match; while ((match = pattern.exec(content)) !== null) { // Add text before the match if (match.index > lastIndex) { parts.push(content.slice(lastIndex, match.index)); } const hashtag = match[1]; const url = match[2]; if (hashtag) { // Style hashtag parts.push( {hashtag} ); } else if (url) { // Style link parts.push( {url} ); } lastIndex = pattern.lastIndex; } // Add remaining text if (lastIndex < content.length) { parts.push(content.slice(lastIndex)); } return parts; } /** LinkedIn logo icon component */ function LinkedInIcon({ className }: { className?: string }) { return ( ); } /** Reaction icon components - Official LinkedIn reaction SVGs */ const reactionIcons: Record = { like: ( ), celebrate: ( ), support: ( ), love: ( ), insightful: ( ), funny: ( ), }; /** * A LinkedIn post embed component with professional styling. * Displays author info and content with optional repost action. * * Features: * - Author avatar with headline * - Multi-line content with hashtag support * - Optional post image * - Expandable content with "...more" button * - LinkedIn icon link to original post (optional) * - Repost button in footer (optional, footer only shows if repostUrl provided) * * @component * @example * ```tsx * * ``` */ export function LinkedInPost({ data, appearance }: LinkedInPostProps) { const resolved: NonNullable = data ?? demoLinkedInPost; const { author, headline, avatar, content, time, image, reactions, topReactions, comments, reposts, postUrl, repostUrl, } = resolved; const { maxLines = 3 } = appearance ?? {}; const hasEngagement = reactions || comments || reposts; const [isExpanded, setIsExpanded] = useState(false); const [isTruncated, setIsTruncated] = useState(false); const contentRef = useRef(null); useEffect(() => { const el = contentRef.current; if (el) { // Check if content is truncated setIsTruncated(el.scrollHeight > el.clientHeight); } }, [content, maxLines]); const handleExpand = () => { setIsExpanded(true); }; return (
{avatar && (
{avatar}
)}

{author}

{headline}

{time}

{postUrl && ( )}

{content ? formatContent(content) : null}

{isTruncated && !isExpanded && ( )}
{/* Image section */} {image && (
Post image
)} {/* Engagement stats - reactions, comments, reposts */} {hasEngagement && (
{topReactions && topReactions.length > 0 && (
{topReactions.slice(0, 3).map((type, idx) => (
{reactionIcons[type]}
))}
)} {reactions && {reactions}}
{comments && {comments} comments} {reposts && {reposts} reposts}
)} {/* Footer with repost button - only shows if repostUrl is provided */} {repostUrl && ( )}
); } ```` ### `registry/social/demo/social.ts` ```ts // Demo data for Social category components // This file contains sample data used for component previews and documentation export const demoXPost = { author: 'Manifest', username: 'manifest_ui', avatar: 'M', verified: true, content: 'Just shipped a new batch of agentic UI components. Build conversational interfaces faster than ever.', time: '2h', likes: '1.2K', retweets: '234', replies: '56', views: '45.2K', } export const demoInstagramPost = { author: 'manifest.ui', avatar: 'M', verified: true, image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800', caption: 'Building the future of agentic UIs, one component at a time.', likes: '2,847', time: '2h', } export const demoLinkedInPost = { author: 'Manifest', headline: 'Manifest UI | Open Source', avatar: 'M', content: 'Excited to announce our latest milestone! We\'ve just crossed 10,000 developers using Manifest to build agentic UIs.', time: '1d', reactions: '1,234', topReactions: ['like', 'celebrate', 'love'] as ('like' | 'celebrate' | 'support' | 'love' | 'insightful' | 'funny')[], comments: '56', reposts: '12', postUrl: 'https://linkedin.com/posts/manifest-123', repostUrl: 'https://linkedin.com/shareArticle?url=...', } export const demoYouTubePost = { channel: 'Manifest', avatar: 'M', title: 'Building Agentic UIs with Manifest', views: '12K', time: '3 days ago', thumbnail: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800', duration: '15:42', } ```