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 List

PreviousNext

Post list with list, grid, carousel, and fullwidth variants. Fullwidth mode shows paginated posts.

Getting Started with Agentic UI Components

Tutorial

Getting Started with Agentic UI Components

Learn how to build conversational interfaces for AI-powered applications.

TutorialComponents
Sarah Chen

Sarah Chen

Jan 15, 2024

Designing for Conversational MCP Interfaces

Design

Designing for Conversational MCP Interfaces

Best practices for intuitive UI components in chat environments.

DesignUX
Alex Rivera

Alex Rivera

Jan 12, 2024

MCP Integration Patterns

Development

MCP Integration Patterns

Use Model Context Protocol for seamless backend communication.

MCPBackend
Jordan Kim

Jordan Kim

Jan 10, 2024

Installation

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

Usage

import { PostList, PostListContent } from "@/components/ui/post-list";
<PostList>
  <PostListContent />
</PostList>

Composition

Use the following composition to build an PostList:

PostList
└── PostListContent

Examples

Grid

Tutorial

Getting Started with Agentic UI Components

Learn how to build conversational interfaces for AI-powered applications.

TutorialComponents
Sarah Chen

Sarah Chen

Jan 15, 2024

Design

Designing for Conversational MCP Interfaces

Best practices for intuitive UI components in chat environments.

DesignUX
Alex Rivera

Alex Rivera

Jan 12, 2024

Development

MCP Integration Patterns

Use Model Context Protocol for seamless backend communication.

MCPBackend
Jordan Kim

Jordan Kim

Jan 10, 2024

Tutorial

Building Payment Flows in Chat

A guide to secure payment experiences in conversational interfaces.

PaymentsSecurity
Morgan Lee

Morgan Lee

Jan 8, 2024

"use client";

import { PostList, PostListContent } from "@/components/ui/post-list";

export function PostListGridDemo() {
  return (
    <PostList appearance={{ variant: "grid" }}>
      <PostListContent />
    </PostList>
  );
}

Carousel

Tutorial

Getting Started with Agentic UI Components

Learn how to build conversational interfaces for AI-powered applications.

TutorialComponents
Sarah Chen

Sarah Chen

Jan 15, 2024

Design

Designing for Conversational MCP Interfaces

Best practices for intuitive UI components in chat environments.

DesignUX
Alex Rivera

Alex Rivera

Jan 12, 2024

Development

MCP Integration Patterns

Use Model Context Protocol for seamless backend communication.

MCPBackend
Jordan Kim

Jordan Kim

Jan 10, 2024

Tutorial

Building Payment Flows in Chat

A guide to secure payment experiences in conversational interfaces.

PaymentsSecurity
Morgan Lee

Morgan Lee

Jan 8, 2024

Development

Real-time Collaboration in AI Apps

Implement real-time updates for collaborative agentic experiences.

WebSocketReal-time
Casey Taylor

Casey Taylor

Jan 6, 2024

"use client";

import { PostList, PostListContent } from "@/components/ui/post-list";

export function PostListCarouselDemo() {
  return (
    <PostList appearance={{ variant: "carousel" }}>
      <PostListContent />
    </PostList>
  );
}

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

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

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import { PostList, PostListContent } from "@/components/ui/post-list";
 
const OpenUIPostList = defineComponent({
  name: "PostList",
  description:
    "Post list with list, grid, carousel, and fullwidth variants. Fullwidth mode shows paginated posts.",
  props: z.object({}),
  component: () => (
    <PostList>
      <PostListContent />
    </PostList>
  ),
});
 
export const post_listLibrary = createLibrary({
  root: "PostList",
  components: [OpenUIPostList],
});

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 PostList 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 { PostList, PostListContent } from "@/components/ui/post-list";
 
export const catalog = defineCatalog(schema, {
  components: {
    PostList: {
      props: z.object({}),
      description:
        "Post list with list, grid, carousel, and fullwidth variants. Fullwidth mode shows paginated posts.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    PostList: () => (
      <PostList>
        <PostListContent />
      </PostList>
    ),
  },
});

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.