For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
30
Sponsor

LinkedIn Post

PreviousNext

LinkedIn post card with professional styling.

M

mcpcn

mcpcn | Open Source

1d

Excited to announce our latest milestone! We've just crossed 10,000 developers using mcpcn to build agentic UIs.

1,234
56 comments12 reposts
Repost

Installation

$ pnpm dlx shadcn@latest add @mcpcn/linkedin-post

Usage

import {
  LinkedInPost,
  LinkedInPostBody,
  LinkedInPostContent,
  LinkedInPostEngagement,
  LinkedInPostFooter,
  LinkedInPostHeader,
  LinkedInPostMain,
} from "@/components/ui/linkedin-post";
<LinkedInPost>
  <LinkedInPostContent>
    <LinkedInPostMain>
      <LinkedInPostHeader />
      <LinkedInPostBody />
    </LinkedInPostMain>
    <LinkedInPostEngagement />
    <LinkedInPostFooter />
  </LinkedInPostContent>
</LinkedInPost>

Composition

Use the following composition to build an LinkedInPost:

LinkedInPost
└── LinkedInPostContent
    ├── LinkedInPostMain
    │   ├── LinkedInPostHeader
    │   └── LinkedInPostBody
    ├── LinkedInPostMedia
    ├── LinkedInPostEngagement
    └── LinkedInPostFooter

Examples

With Media

M

mcpcn

mcpcn | Open Source

2h

Excited to announce our latest milestone! We've just crossed 10,000 developers using mcpcn to build agentic UIs.

Post image
2,847
124 comments89 reposts
Repost
"use client";

import {
  LinkedInPost,
  LinkedInPostBody,
  LinkedInPostContent,
  LinkedInPostEngagement,
  LinkedInPostFooter,
  LinkedInPostHeader,
  LinkedInPostMain,
  LinkedInPostMedia,
} from "@/components/ui/linkedin-post";

export function LinkedInPostMediaDemo() {
  return (
    <LinkedInPost
      data={{
        author: "mcpcn",
        avatar: "M",
        comments: "124",
        content:
          "Excited to announce our latest milestone! We've just crossed 10,000 developers using mcpcn to build agentic UIs.",
        headline: "mcpcn | Open Source",
        image: "https://picsum.photos/seed/linkedin-post/800/450",
        reactions: "2,847",
        reposts: "89",
        time: "2h",
        topReactions: ["like", "celebrate", "insightful"],
      }}
    >
      <LinkedInPostContent>
        <LinkedInPostMain>
          <LinkedInPostHeader />
          <LinkedInPostBody />
        </LinkedInPostMain>
        <LinkedInPostMedia />
        <LinkedInPostEngagement />
        <LinkedInPostFooter />
      </LinkedInPostContent>
    </LinkedInPost>
  );
}

Truncated Content

M

mcpcn

mcpcn | Open Source

2h

Excited to announce our latest milestone! We've just crossed 10,000 developers using mcpcn to build agentic UIs. Thank you to everyone who believed in our vision. What's next? We're working on something big. Stay tuned! #AI #AgenticUI #Developer #OpenSource

15K
890 comments2.1K reposts
Repost
"use client";

import {
  LinkedInPost,
  LinkedInPostBody,
  LinkedInPostContent,
  LinkedInPostEngagement,
  LinkedInPostFooter,
  LinkedInPostHeader,
  LinkedInPostMain,
} from "@/components/ui/linkedin-post";

export function LinkedInPostTruncatedDemo() {
  return (
    <LinkedInPost
      appearance={{ maxLines: 3 }}
      data={{
        author: "mcpcn",
        avatar: "M",
        comments: "890",
        content:
          "Excited to announce our latest milestone!\n\nWe've just crossed 10,000 developers using mcpcn to build agentic UIs. Thank you to everyone who believed in our vision.\n\nWhat's next? We're working on something big. Stay tuned!\n\n#AI #AgenticUI #Developer #OpenSource",
        headline: "mcpcn | Open Source",
        reactions: "15K",
        reposts: "2.1K",
        time: "2h",
        topReactions: ["like", "insightful", "celebrate"],
      }}
    >
      <LinkedInPostContent>
        <LinkedInPostMain>
          <LinkedInPostHeader />
          <LinkedInPostBody />
        </LinkedInPostMain>
        <LinkedInPostEngagement />
        <LinkedInPostFooter />
      </LinkedInPostContent>
    </LinkedInPost>
  );
}

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

Add LinkedInPost to a component library and map it to the installed component.

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import {
  LinkedInPost,
  LinkedInPostBody,
  LinkedInPostContent,
  LinkedInPostEngagement,
  LinkedInPostFooter,
  LinkedInPostHeader,
  LinkedInPostMain,
} from "@/components/ui/linkedin-post";
 
const OpenUILinkedInPost = defineComponent({
  name: "LinkedInPost",
  description: "LinkedIn post card with professional styling.",
  props: z.object({}),
  component: () => (
    <LinkedInPost>
      <LinkedInPostContent>
        <LinkedInPostMain>
          <LinkedInPostHeader />
          <LinkedInPostBody />
        </LinkedInPostMain>
        <LinkedInPostEngagement />
        <LinkedInPostFooter />
      </LinkedInPostContent>
    </LinkedInPost>
  ),
});
 
export const linkedin_postLibrary = createLibrary({
  root: "LinkedInPost",
  components: [OpenUILinkedInPost],
});

For richer generated compositions, define the child primitives separately and connect them with .ref fields. See Defining Components in the OpenUI documentation.

json-render Integration

Install the json-render React packages.

pnpm add @json-render/core @json-render/react zod

Add LinkedInPost to a component catalog and map it to the installed component.

import { defineCatalog } from "@json-render/core";
import { defineRegistry } from "@json-render/react";
import { schema } from "@json-render/react/schema";
import { z } from "zod";
 
import {
  LinkedInPost,
  LinkedInPostBody,
  LinkedInPostContent,
  LinkedInPostEngagement,
  LinkedInPostFooter,
  LinkedInPostHeader,
  LinkedInPostMain,
} from "@/components/ui/linkedin-post";
 
export const catalog = defineCatalog(schema, {
  components: {
    LinkedInPost: {
      props: z.object({}),
      description: "LinkedIn post card with professional styling.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    LinkedInPost: () => (
      <LinkedInPost>
        <LinkedInPostContent>
          <LinkedInPostMain>
            <LinkedInPostHeader />
            <LinkedInPostBody />
          </LinkedInPostMain>
          <LinkedInPostEngagement />
          <LinkedInPostFooter />
        </LinkedInPostContent>
      </LinkedInPost>
    ),
  },
});

Use catalog.prompt() to constrain model output, then render the generated spec with the json-render React Renderer. See the json-render Quick Start for the provider and streaming setup.

API Reference

See the Base UI documentation for more information.