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

Instagram Post

PreviousNext

Instagram post card with image and engagement.

M
mcpcn✓
Instagram post by mcpcn

2,847 likes

mcpcn Building the future of agentic UIs, one component at a time.

2h

Installation

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

Usage

import {
  InstagramPost,
  InstagramPostActions,
  InstagramPostCaption,
  InstagramPostContent,
  InstagramPostFooter,
  InstagramPostHeader,
  InstagramPostLikes,
  InstagramPostMedia,
} from "@/components/ui/instagram-post";
<InstagramPost>
  <InstagramPostHeader />
  <InstagramPostMedia />
  <InstagramPostContent>
    <InstagramPostActions />
    <InstagramPostLikes />
    <InstagramPostCaption />
    <InstagramPostFooter />
  </InstagramPostContent>
</InstagramPost>

Composition

Use the following composition to build an InstagramPost:

InstagramPost
├── InstagramPostHeader
├── InstagramPostMedia
└── InstagramPostContent
    ├── InstagramPostActions
    ├── InstagramPostLikes
    ├── InstagramPostCaption
    └── InstagramPostFooter

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

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

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import {
  InstagramPost,
  InstagramPostActions,
  InstagramPostCaption,
  InstagramPostContent,
  InstagramPostFooter,
  InstagramPostHeader,
  InstagramPostLikes,
  InstagramPostMedia,
} from "@/components/ui/instagram-post";
 
const OpenUIInstagramPost = defineComponent({
  name: "InstagramPost",
  description: "Instagram post card with image and engagement.",
  props: z.object({}),
  component: () => (
    <InstagramPost>
      <InstagramPostHeader />
      <InstagramPostMedia />
      <InstagramPostContent>
        <InstagramPostActions />
        <InstagramPostLikes />
        <InstagramPostCaption />
        <InstagramPostFooter />
      </InstagramPostContent>
    </InstagramPost>
  ),
});
 
export const instagram_postLibrary = createLibrary({
  root: "InstagramPost",
  components: [OpenUIInstagramPost],
});

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 InstagramPost 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 {
  InstagramPost,
  InstagramPostActions,
  InstagramPostCaption,
  InstagramPostContent,
  InstagramPostFooter,
  InstagramPostHeader,
  InstagramPostLikes,
  InstagramPostMedia,
} from "@/components/ui/instagram-post";
 
export const catalog = defineCatalog(schema, {
  components: {
    InstagramPost: {
      props: z.object({}),
      description: "Instagram post card with image and engagement.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    InstagramPost: () => (
      <InstagramPost>
        <InstagramPostHeader />
        <InstagramPostMedia />
        <InstagramPostContent>
          <InstagramPostActions />
          <InstagramPostLikes />
          <InstagramPostCaption />
          <InstagramPostFooter />
        </InstagramPostContent>
      </InstagramPost>
    ),
  },
});

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.