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

Post Card

PreviousNext

Post card with image, title, excerpt, author info and read more button. Supports default, compact, horizontal, and covered variants. Includes post-detail for fullscreen view.

Getting Started with Agentic UI Components

Tutorial

Getting Started with Agentic UI Components

Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.

TutorialComponents
Sarah Chen

Sarah Chen

Jan 15, 2024

Installation

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

Usage

import { PostCard, PostCardContent } from "@/components/ui/post-card";
<PostCard>
  <PostCardContent />
</PostCard>

Composition

Use the following composition to build an PostCard:

PostCard
├── PostCardAction
├── PostCardAuthor
├── PostCardCategory
├── PostCardContent
├── PostCardImage
├── PostCardTags
└── PostCardText

Examples

Without Image

Tutorial

Getting Started with Agentic UI Components

Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.

TutorialComponents
Sarah Chen

Sarah Chen

Jan 15, 2024

"use client";

import { PostCard, PostCardContent } from "@/components/ui/post-card";

export function PostCardWithoutImageDemo() {
  return (
    <PostCard appearance={{ showImage: false }}>
      <PostCardContent />
    </PostCard>
  );
}

Compact

Tutorial

Getting Started with Agentic UI Components

Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.

TutorialComponents
Sarah Chen

Sarah Chen

Jan 15, 2024

"use client";

import { PostCard, PostCardContent } from "@/components/ui/post-card";

export function PostCardCompactDemo() {
  return (
    <PostCard appearance={{ variant: "compact" }}>
      <PostCardContent />
    </PostCard>
  );
}

Horizontal

Getting Started with Agentic UI Components

Tutorial

Getting Started with Agentic UI Components

Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.

TutorialComponents
Sarah Chen

Sarah Chen

Jan 15, 2024

"use client";

import { PostCard, PostCardContent } from "@/components/ui/post-card";

export function PostCardHorizontalDemo() {
  return (
    <PostCard appearance={{ variant: "horizontal" }}>
      <PostCardContent />
    </PostCard>
  );
}

Covered

Getting Started with Agentic UI Components

Tutorial

Getting Started with Agentic UI Components

Learn how to build conversational interfaces with our comprehensive component library designed for AI-powered applications.

Sarah Chen

Sarah Chen

Jan 15, 2024

"use client";

import { PostCard, PostCardContent } from "@/components/ui/post-card";

export function PostCardCoveredDemo() {
  return (
    <PostCard appearance={{ variant: "covered" }}>
      <PostCardContent />
    </PostCard>
  );
}

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

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

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import { PostCard, PostCardContent } from "@/components/ui/post-card";
 
const OpenUIPostCard = defineComponent({
  name: "PostCard",
  description:
    "Post card with image, title, excerpt, author info and read more button. Supports default, compact, horizontal, and covered variants. Includes post-detail for fullscreen view.",
  props: z.object({}),
  component: () => (
    <PostCard>
      <PostCardContent />
    </PostCard>
  ),
});
 
export const post_cardLibrary = createLibrary({
  root: "PostCard",
  components: [OpenUIPostCard],
});

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 PostCard 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 { PostCard, PostCardContent } from "@/components/ui/post-card";
 
export const catalog = defineCatalog(schema, {
  components: {
    PostCard: {
      props: z.object({}),
      description:
        "Post card with image, title, excerpt, author info and read more button. Supports default, compact, horizontal, and covered variants. Includes post-detail for fullscreen view.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    PostCard: () => (
      <PostCard>
        <PostCardContent />
      </PostCard>
    ),
  },
});

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.