vercel-labs · smildlzj · Mar 6, 2026 · Mar 7, 2026 · Mar 6, 2026 · Mar 7, 2026
diff --git a/README.md b/README.md
@@ -9,6 +9,8 @@ Generate dynamic, personalized UIs from prompts without sacrificing reliability.
 npm install @json-render/core @json-render/react
 # for React with pre-built shadcn/ui components
 npm install @json-render/shadcn
+# for React with pre-built Ant Design components
+npm install @json-render/antd
 # or for React Native
 npm install @json-render/core @json-render/react-native
 # or for video
@@ -34,8 +36,9 @@ json-render is a **Generative UI** framework: AI generates interfaces from natur
 - **Guardrailed** - AI can only use components in your catalog
 - **Predictable** - JSON output matches your schema, every time
 - **Fast** - Stream and render progressively as the model responds
-- **Cross-Platform** - React, Vue, Svelte, Solid (web), React Native (mobile) from the same catalog
-- **Batteries Included** - 36 pre-built shadcn/ui components ready to use
+- **Cross-Platform** - React, Vue, Svelte (web), React Native (mobile) from the same catalog
+- **Batteries Included** - 36 pre-built shadcn/ui components and 50+ Ant Design components ready to use
+
 
 ## Quick Start
 
@@ -115,27 +118,25 @@ function Dashboard({ spec }) {
 
 ## Packages
 
-| Package                     | Description                                                            |
-| --------------------------- | ---------------------------------------------------------------------- |
-| `@json-render/core`         | Schemas, catalogs, AI prompts, dynamic props, SpecStream utilities     |
-| `@json-render/react`        | React renderer, contexts, hooks                                        |
-| `@json-render/vue`          | Vue 3 renderer, composables, providers                                 |
-| `@json-render/svelte`       | Svelte 5 renderer with runes-based reactivity                          |
-| `@json-render/solid`        | SolidJS renderer with fine-grained reactive contexts                   |
-| `@json-render/shadcn`       | 36 pre-built shadcn/ui components (Radix UI + Tailwind CSS)            |
-| `@json-render/react-three-fiber` | React Three Fiber renderer for 3D scenes (19 built-in components)  |
-| `@json-render/react-native` | React Native renderer with standard mobile components                  |
-| `@json-render/remotion`     | Remotion video renderer, timeline schema                               |
-| `@json-render/react-pdf`    | React PDF renderer for generating PDF documents from specs             |
-| `@json-render/react-email`  | React Email renderer for HTML/plain-text emails from specs             |
-| `@json-render/image`        | Image renderer for SVG/PNG output (OG images, social cards) via Satori |
-| `@json-render/codegen`      | Utilities for generating code from json-render UI trees                |
-| `@json-render/redux`        | Redux / Redux Toolkit adapter for `StateStore`                         |
-| `@json-render/zustand`      | Zustand adapter for `StateStore`                                       |
-| `@json-render/jotai`        | Jotai adapter for `StateStore`                                         |
-| `@json-render/xstate`       | XState Store (atom) adapter for `StateStore`                           |
-| `@json-render/mcp`          | MCP Apps integration for Claude, ChatGPT, Cursor, VS Code              |
-| `@json-render/yaml`         | YAML wire format with streaming parser, edit modes, AI SDK transform   |
+| Package | Description |
+|---------|-------------|
+| `@json-render/core` | Schemas, catalogs, AI prompts, dynamic props, SpecStream utilities |
+| `@json-render/react` | React renderer, contexts, hooks |
+| `@json-render/vue` | Vue 3 renderer, composables, providers |
+| `@json-render/svelte` | Svelte 5 renderer with runes-based reactivity |
+| `@json-render/shadcn` | 36 pre-built shadcn/ui components (Radix UI + Tailwind CSS) |
+| `@json-render/antd` | 50+ pre-built Ant Design components |
+| `@json-render/react-native` | React Native renderer with standard mobile components |
+| `@json-render/remotion` | Remotion video renderer, timeline schema |
+| `@json-render/react-pdf` | React PDF renderer for generating PDF documents from specs |
+| `@json-render/react-email` | React Email renderer for HTML/plain-text emails from specs |
+| `@json-render/image` | Image renderer for SVG/PNG output (OG images, social cards) via Satori |
+| `@json-render/codegen` | Utilities for generating code from json-render UI trees |
+| `@json-render/redux` | Redux / Redux Toolkit adapter for `StateStore` |
+| `@json-render/zustand` | Zustand adapter for `StateStore` |
+| `@json-render/jotai` | Jotai adapter for `StateStore` |
+| `@json-render/xstate` | XState Store (atom) adapter for `StateStore` |
+| `@json-render/mcp` | MCP Apps integration for Claude, ChatGPT, Cursor, VS Code |
 
 ## Renderers
 
@@ -257,6 +258,39 @@ const { registry } = defineRegistry(catalog, {
 <Renderer spec={spec} registry={registry} />;
 ```
 
+### Ant Design (Web)
+
+```tsx
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react/schema";
+import { defineRegistry, Renderer } from "@json-render/react";
+import { antdComponentDefinitions } from "@json-render/antd/catalog";
+import { antdComponents } from "@json-render/antd";
+
+// Pick components from the 50+ standard definitions
+const catalog = defineCatalog(schema, {
+  components: {
+    Card: antdComponentDefinitions.Card,
+    Stack: antdComponentDefinitions.Stack,
+    Heading: antdComponentDefinitions.Heading,
+    Button: antdComponentDefinitions.Button,
+  },
+  actions: {},
+});
+
+// Use matching implementations
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: antdComponents.Card,
+    Stack: antdComponents.Stack,
+    Heading: antdComponents.Heading,
+    Button: antdComponents.Button,
+  },
+});
+
+<Renderer spec={spec} registry={registry} />
+```
+
 ### React Native (Mobile)
 
 ```tsx

diff --git a/packages/antd/CHANGELOG.md b/packages/antd/CHANGELOG.md
@@ -0,0 +1,36 @@
+# @json-render/antd
+
+## 0.11.0
+
+### Minor Changes
+
+- Initial release of `@json-render/antd` package.
+
+  Pre-built [Ant Design](https://ant.design/) component library for json-render. 50+ components ready to use with `defineCatalog` and `defineRegistry`.
+
+  - `antdComponentDefinitions` — Zod-based catalog definitions for all components (server-safe, no React dependency via `@json-render/antd/catalog`)
+  - `antdComponents` — React implementations for all components
+
+  ### Layout Components
+  - Card, Stack, Grid, Divider, Space
+
+  ### Navigation Components
+  - Tabs, Collapse, Menu
+
+  ### Overlay Components
+  - Modal, Drawer, Popover, Tooltip, Dropdown
+
+  ### Data Display Components
+  - Table, Heading, Text, Paragraph, Image, Avatar, Badge, Tag, Alert, Progress, Skeleton, Spin, Empty, Statistic, Descriptions, Timeline, Carousel
+
+  ### Form Components
+  - Input, TextArea, InputNumber, Select, Checkbox, CheckboxGroup, Radio, Switch, Slider, Rate, DatePicker, TimePicker, Upload, Transfer
+
+  ### Action Components
+  - Button, ButtonGroup, Link, Pagination, Segmented, Steps, Result
+
+### Patch Changes
+
+- Updated dependencies
+  - @json-render/core@0.11.0
+  - @json-render/react@0.11.0
diff --git a/packages/antd/README.md b/packages/antd/README.md
@@ -0,0 +1,245 @@
+# @json-render/antd
+
+Pre-built [Ant Design](https://ant.design/) components for json-render. Drop-in catalog definitions and React implementations for 70+ components built on Ant Design.
+
+## Installation
+
+```bash
+npm install @json-render/antd @json-render/core @json-render/react antd zod
+```
+
+## Quick Start
+
+### 1. Create a Catalog
+
+Import standard definitions from `@json-render/antd/catalog` and pass them to `defineCatalog`:
+
+```typescript
+import { defineCatalog } from "@json-render/core";
+import { schema } from "@json-render/react/schema";
+import { antdComponentDefinitions } from "@json-render/antd/catalog";
+
+const catalog = defineCatalog(schema, {
+  components: {
+    // Pick the components you need
+    Card: antdComponentDefinitions.Card,
+    Stack: antdComponentDefinitions.Stack,
+    Heading: antdComponentDefinitions.Heading,
+    Button: antdComponentDefinitions.Button,
+    Input: antdComponentDefinitions.Input,
+  },
+  actions: {},
+});
+```
+
+> **Note:** State actions (`setState`, `pushState`, `removeState`) are built into the React schema and handled automatically by `ActionProvider`. You don't need to declare them in your catalog.
+
+### 2. Create a Registry
+
+Import standard implementations from `@json-render/antd` and pass them to `defineRegistry`:
+
+```typescript
+import { defineRegistry } from "@json-render/react";
+import { antdComponents } from "@json-render/antd";
+
+const { registry } = defineRegistry(catalog, {
+  components: {
+    Card: antdComponents.Card,
+    Stack: antdComponents.Stack,
+    Heading: antdComponents.Heading,
+    Button: antdComponents.Button,
+    Input: antdComponents.Input,
+  },
+});
+```
+
+### 3. Render
+
+```tsx
+import { Renderer } from "@json-render/react";
+
+function App({ spec }) {
+  return <Renderer spec={spec} registry={registry} />;
+}
+```
+
+## Extending with Custom Components
+
+Pick standard components as a base and add your own alongside them:
+
+```typescript
+import { z } from "zod";
+
+// Catalog
+const catalog = defineCatalog(schema, {
+  components: {
+    // Standard
+    Card: antdComponentDefinitions.Card,
+    Stack: antdComponentDefinitions.Stack,
+    Button: antdComponentDefinitions.Button,
+
+    // Custom
+    Metric: {
+      props: z.object({
+        label: z.string(),
+        value: z.string(),
+        trend: z.enum(["up", "down", "neutral"]).nullable(),
+      }),
+      description: "KPI metric display",
+    },
+  },
+  actions: {},
+});
+
+// Registry
+const { registry } = defineRegistry(catalog, {
+  components: {
+    // Standard
+    Card: antdComponents.Card,
+    Stack: antdComponents.Stack,
+    Button: antdComponents.Button,
+
+    // Custom
+    Metric: ({ props }) => (
+      <div>
+        <span>{props.label}</span>
+        <span>{props.value}</span>
+      </div>
+    ),
+  },
+});
+```
+
+## Standard Components
+
+### Layout
+
+| Component | Description |
+|-----------|-------------|
+| `Card` | Container card with optional title and description |
+| `Flex` | Flex layout container with gap, alignment, justify |
+| `Stack` | Stack layout container (alias for Flex) |
+| `Row` | Grid row (24-column system) |
+| `Col` | Grid column with span, offset |
+| `Masonry` | Masonry layout with responsive columns |
+| `Layout` | Antd layout container |
+| `LayoutHeader` | Layout header |
+| `LayoutContent` | Layout main content area |
+| `LayoutFooter` | Layout footer |
+| `LayoutSider` | Layout sidebar |
+| `Divider` | Visual separator line |
+| `Space` | Spacing component |
+
+### Navigation
+
+| Component | Description |
+|-----------|-------------|
+| `Tabs` | Tabbed navigation |
+| `Collapse` | Collapsible accordion sections |
+| `Menu` | Navigation menu |
+| `Affix` | Pin content to fixed position when scrolling |
+| `Anchor` | Anchor navigation for page sections |
+| `Breadcrumb` | Breadcrumb navigation path |
+| `BackTop` | Back to top button |
+
+### Overlay
+
+| Component | Description |
+|-----------|-------------|
+| `Modal` | Modal dialog |
+| `Drawer` | Drawer panel |
+| `Popover` | Click-triggered popover |
+| `Tooltip` | Hover tooltip |
+| `Dropdown` | Dropdown menu |
+
+### Data Display
+
+| Component | Description |
+|-----------|-------------|
+| `Table` | Data table with columns and rows |
+| `Heading` | Heading text |
+| `Text` | Text content |
+| `Paragraph` | Paragraph text |
+| `Image` | Image display |
+| `Avatar` | User avatar with fallback |
+| `Badge` | Status badge |
+| `Tag` | Tag component |
+| `Alert` | Alert banner |
+| `Progress` | Progress bar |
+| `Skeleton` | Loading placeholder |
+| `Spin` | Loading spinner |
+| `Empty` | Empty state |
+| `Statistic` | Statistic display |
+| `Descriptions` | Description list |
+| `Timeline` | Timeline display |
+| `Carousel` | Horizontally scrollable carousel |
+| `Calendar` | Calendar for date display/selection |
+| `List` | List component with pagination and grid |
+| `Tree` | Tree structure display and selection |
+| `QRCode` | QRCode generator |
+
+### Data Entry
+
+| Component | Description |
+|-----------|-------------|
+| `Input` | Text input with label, validation, and `validateOn` timing |
+| `TextArea` | Multi-line text input with validation |
+| `InputNumber` | Number input |
+| `Select` | Dropdown select with validation |
+| `Checkbox` | Checkbox input with validation |
+| `CheckboxGroup` | Group of checkboxes |
+| `Radio` | Radio button group with validation |
+| `Switch` | Toggle switch with validation |
+| `Slider` | Range slider |
+| `Rate` | Star rating |
+| `DatePicker` | Date picker |
+| `TimePicker` | Time picker |
+| `Upload` | File upload |
+| `Transfer` | Transfer shuttle |
+| `AutoComplete` | Input with suggestions |
+| `Cascader` | Cascader selection for hierarchical data |
+| `ColorPicker` | Color picker |
+| `Mentions` | Mentions input for @-tagging |
+| `TreeSelect` | Tree select dropdown |
+
+### Action
+
+| Component | Description |
+|-----------|-------------|
+| `Button` | Clickable button with variants |
+| `Link` | Anchor link |
+| `ButtonGroup` | Group of buttons |
+| `Pagination` | Page navigation |
+| `Segmented` | Segmented control |
+| `Steps` | Steps component |
+| `Result` | Result page |
+
+## Built-in Actions
+
+State actions (`setState`, `pushState`, `removeState`, `validateForm`) are built into the `@json-render/react` schema and handled automatically by `ActionProvider`. They are included in prompts without needing to be declared in your catalog.
+
+| Action | Description |
+|--------|-------------|
+| `setState` | Set a value at a state path |
+| `pushState` | Push a value onto an array in state |
+| `removeState` | Remove an item from an array in state |
+| `validateForm` | Validate all fields and write result to state |
+
+### Validation Timing (`validateOn`)
+
+All form components support the `validateOn` prop to control when validation runs:
+
+| Value | Description | Default For |
+|-------|-------------|-------------|
+| `"change"` | Validate on every input change | Select, Checkbox, Radio, Switch |
+| `"blur"` | Validate when field loses focus | Input, Textarea |
+| `"submit"` | Validate only on form submission | — |
+
+## Exports
+
+| Entry Point | Exports |
+|-------------|---------|
+| `@json-render/antd` | `antdComponents` |
+| `@json-render/antd/catalog` | `antdComponentDefinitions` |
+
+The `/catalog` entry point contains only Zod schemas (no React dependency), so it can be used in server-side code for prompt generation.