= {
+ // === A2UI Standard Icons (camelCase) ===
+ 'accountcircle': Icons.IconUser,
+ 'add': Icons.IconPlus,
+ 'arrowback': Icons.IconArrowLeft,
+ 'arrowforward': Icons.IconArrowRight,
+ 'attachfile': Icons.IconPaperclip,
+ 'calendartoday': Icons.IconCalendar,
+ 'call': Icons.IconPhone,
+ 'camera': Icons.IconCamera,
+ 'check': Icons.IconTick,
+ 'close': Icons.IconClose,
+ 'delete': Icons.IconDelete,
+ 'download': Icons.IconDownload,
+ 'edit': Icons.IconEdit,
+ 'event': Icons.IconCalendar,
+ 'error': Icons.IconAlertTriangle,
+ 'fastforward': Icons.IconFastForward,
+ 'favorite': Icons.IconLikeHeart,
+ 'favoriteoff': Icons.IconLikeHeart,
+ 'folder': Icons.IconFolder,
+ 'help': Icons.IconHelpCircle,
+ 'home': Icons.IconHome,
+ 'info': Icons.IconInfoCircle,
+ 'locationon': Icons.IconMapPin,
+ 'lock': Icons.IconLock,
+ 'lockopen': Icons.IconUnlock,
+ 'mail': Icons.IconMail,
+ 'menu': Icons.IconMenu,
+ 'morevert': Icons.IconMoreStroked,
+ 'morehoriz': Icons.IconMore,
+ 'notificationsoff': Icons.IconBellStroked,
+ 'notifications': Icons.IconBell,
+ 'pause': Icons.IconPause,
+ 'payment': Icons.IconCreditCard,
+ 'person': Icons.IconUser,
+ 'phone': Icons.IconPhone,
+ 'photo': Icons.IconImage,
+ 'play': Icons.IconPlay,
+ 'print': Icons.IconPrint,
+ 'refresh': Icons.IconRefresh,
+ 'rewind': Icons.IconBackward,
+ 'search': Icons.IconSearch,
+ 'send': Icons.IconSend,
+ 'settings': Icons.IconSetting,
+ 'share': Icons.IconShareStroked,
+ 'shoppingcart': Icons.IconShoppingBag,
+ 'skipnext': Icons.IconForward,
+ 'skipprevious': Icons.IconBackward,
+ 'star': Icons.IconStar,
+ 'starhalf': Icons.IconStar,
+ 'staroff': Icons.IconStarStroked,
+ 'stop': Icons.IconStop,
+ 'upload': Icons.IconUpload,
+ 'visibility': Icons.IconEyeOpened,
+ 'visibilityoff': Icons.IconEyeClosedSolid,
+ 'volumedown': Icons.IconVolume1,
+ 'volumemute': Icons.IconVolumnSilent,
+ 'volumeoff': Icons.IconVolumnSilent,
+ 'volumeup': Icons.IconVolume2,
+ 'warning': Icons.IconAlertCircle,
+
+ // === Additional common aliases ===
+ 'plus': Icons.IconPlus,
+ 'user': Icons.IconUser,
+ 'like': Icons.IconLikeHeart,
+ 'heart': Icons.IconLikeHeart,
+ 'success': Icons.IconTickCircle,
+ 'arrow-left': Icons.IconArrowLeft,
+ 'arrow-right': Icons.IconArrowRight,
+ 'arrow-up': Icons.IconArrowUp,
+ 'arrow-down': Icons.IconArrowDown,
+ 'chevron-left': Icons.IconChevronLeft,
+ 'chevron-right': Icons.IconChevronRight,
+ 'chevron-up': Icons.IconChevronUp,
+ 'chevron-down': Icons.IconChevronDown,
+ 'more': Icons.IconMore,
+ 'copy': Icons.IconCopy,
+ 'calendar': Icons.IconCalendar,
+ 'clock': Icons.IconClock,
+ 'location': Icons.IconMapPin,
+ 'link': Icons.IconLink,
+ 'image': Icons.IconImage,
+ 'video': Icons.IconVideo,
+ 'file': Icons.IconFile,
+};
+
+/**
+ * Normalize icon name to match iconMap keys.
+ * Handles both camelCase (A2UI spec) and snake_case (Material Icons style).
+ * Examples:
+ * - "locationOn" → "locationon"
+ * - "location_on" → "locationon"
+ * - "calendar_today" → "calendartoday"
+ */
+function normalizeIconName(name: string): string {
+ // Remove underscores/hyphens and convert to lowercase
+ return name.replace(/[_-]/g, '').toLowerCase();
+}
+
+export function Icon({ surfaceId, component }: CatalogComponentProps) {
+ const node = component as Types.IconNode;
+ const { name } = node.properties;
+
+ const iconName = useStringBinding(name, component, surfaceId);
+
+ if (!iconName) {
+ return null;
+ }
+
+ // Normalize icon name to handle both camelCase and snake_case
+ const normalizedName = normalizeIconName(iconName);
+ const IconComp = iconMap[normalizedName] ?? Icons.IconHelpCircle;
+
+ const style: React.CSSProperties = {
+ flex: component.weight ?? 'initial',
+ };
+
+ return ;
+}
+
diff --git a/renderers/react/src/components/catalog/Image.tsx b/renderers/react/src/components/catalog/Image.tsx
new file mode 100644
index 00000000..15c119ae
--- /dev/null
+++ b/renderers/react/src/components/catalog/Image.tsx
@@ -0,0 +1,59 @@
+import { Image as SemiImage } from '@douyinfe/semi-ui';
+import { Types } from '@a2ui/lit/0.8';
+import { CatalogComponentProps } from './index';
+import { useStringBinding } from '../../core/hooks';
+
+export function Image({ surfaceId, component }: CatalogComponentProps) {
+ const node = component as Types.ImageNode;
+ const { url, usageHint } = node.properties;
+
+ const imageUrl = useStringBinding(url, component, surfaceId);
+
+ if (!imageUrl) {
+ return null;
+ }
+
+ // 根据 usageHint 设置不同的尺寸
+ const getSize = () => {
+ switch (usageHint) {
+ case 'icon':
+ return { width: 24, height: 24 };
+ case 'avatar':
+ return { width: 64, height: 64 };
+ case 'smallFeature':
+ return { width: 80, height: 80 };
+ case 'mediumFeature':
+ return { width: 100, height: 100 };
+ case 'largeFeature':
+ return { width: 160, height: 120 };
+ case 'header':
+ return { width: '100%', height: 180 };
+ default:
+ // 默认尺寸适合卡片内的图片
+ return { width: 100, height: 100 };
+ }
+ };
+
+ const size = getSize();
+
+ const containerStyle: React.CSSProperties = {
+ flex: component.weight ?? 'initial',
+ flexShrink: 0,
+ width: size.width,
+ height: size.height,
+ borderRadius: usageHint === 'avatar' ? '50%' : '12px',
+ overflow: 'hidden',
+ };
+
+
+ return (
+
+
+
+ );
+}
diff --git a/renderers/react/src/components/catalog/List.tsx b/renderers/react/src/components/catalog/List.tsx
new file mode 100644
index 00000000..649c8b92
--- /dev/null
+++ b/renderers/react/src/components/catalog/List.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Types } from '@a2ui/lit/0.8';
+import { CatalogComponentProps } from './index';
+import { ChildRenderer } from '../Renderer';
+
+export function List({ surfaceId, component }: CatalogComponentProps) {
+ const node = component as Types.ListNode;
+ const { direction = 'vertical', children } = node.properties;
+
+ const style: React.CSSProperties = {
+ display: 'flex',
+ flexDirection: direction === 'horizontal' ? 'row' : 'column',
+ gap: '8px',
+ overflow: 'auto',
+ flex: component.weight ?? 'initial',
+ };
+
+ return (
+
+
+
+ );
+}
+
diff --git a/renderers/react/src/components/catalog/Modal.tsx b/renderers/react/src/components/catalog/Modal.tsx
new file mode 100644
index 00000000..e5d58f56
--- /dev/null
+++ b/renderers/react/src/components/catalog/Modal.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Modal as SemiModal } from '@douyinfe/semi-ui';
+import { Types } from '@a2ui/lit/0.8';
+import { CatalogComponentProps } from './index';
+import { Renderer } from '../Renderer';
+
+export function Modal({ surfaceId, component }: CatalogComponentProps) {
+ const node = component as Types.ModalNode;
+ const { entryPointChild, contentChild } = node.properties;
+ const [visible, setVisible] = useState(false);
+
+ const style: React.CSSProperties = {
+ flex: component.weight ?? 'initial',
+ };
+
+ return (
+
+ {entryPointChild && (
+
setVisible(true)}>
+
+
+ )}
+
setVisible(false)}
+ footer={null}
+ >
+ {contentChild && (
+
+ )}
+
+
+
+
+ );
+}
diff --git a/renderers/react/src/components/catalog/Slider.tsx b/renderers/react/src/components/catalog/Slider.tsx
new file mode 100644
index 00000000..5889cd78
--- /dev/null
+++ b/renderers/react/src/components/catalog/Slider.tsx
@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import { Slider as SemiSlider } from '@douyinfe/semi-ui';
+import { Types } from '@a2ui/lit/0.8';
+import { CatalogComponentProps } from './index';
+import { useNumberBinding, useSetData } from '../../core/hooks';
+
+export function Slider({ surfaceId, component }: CatalogComponentProps) {
+ const node = component as Types.SliderNode;
+ const { value, minValue = 0, maxValue = 100 } = node.properties;
+
+ const currentValue = useNumberBinding(value, component, surfaceId);
+ const setData = useSetData(component, surfaceId);
+
+ const handleChange = useCallback(
+ (val: number | number[] | undefined) => {
+ if (value && 'path' in value && value.path && val !== undefined) {
+ const numVal = Array.isArray(val) ? val[0] : val;
+ setData(value.path, numVal);
+ }
+ },
+ [value, setData]
+ );
+
+ const style: React.CSSProperties = {
+ flex: component.weight ?? 'initial',
+ width: '100%',
+ };
+
+ return (
+
+ );
+}
+
diff --git a/renderers/react/src/components/catalog/Tabs.tsx b/renderers/react/src/components/catalog/Tabs.tsx
new file mode 100644
index 00000000..e5580b7b
--- /dev/null
+++ b/renderers/react/src/components/catalog/Tabs.tsx
@@ -0,0 +1,50 @@
+import { Tabs as SemiTabs, TabPane } from '@douyinfe/semi-ui';
+import { Types } from '@a2ui/lit/0.8';
+import { CatalogComponentProps } from './index';
+import { Renderer } from '../Renderer';
+import { useStringBinding } from '../../core/hooks';
+
+interface TabItemProps {
+ surfaceId: string;
+ component: Types.AnyComponentNode;
+ item: Types.TabsNode['properties']['tabItems'][0];
+ index: number;
+}
+
+function TabItem({ surfaceId, component, item, index }: TabItemProps) {
+ const title = useStringBinding(item.title, component, surfaceId);
+
+ return (
+
+ {item.child && (
+
+ )}
+
+ );
+}
+
+export function Tabs({ surfaceId, component }: CatalogComponentProps) {
+ const node = component as Types.TabsNode;
+ const { tabItems } = node.properties;
+
+ const style: React.CSSProperties = {
+ flex: component.weight ?? 'initial',
+ };
+
+ return (
+
+
+ {tabItems?.map((item, index) => (
+
+ ))}
+
+
+ );
+}
+
diff --git a/renderers/react/src/components/catalog/Text.tsx b/renderers/react/src/components/catalog/Text.tsx
new file mode 100644
index 00000000..78265b42
--- /dev/null
+++ b/renderers/react/src/components/catalog/Text.tsx
@@ -0,0 +1,78 @@
+import { Rating, MarkdownRender } from '@douyinfe/semi-ui';
+import { Types } from '@a2ui/lit/0.8';
+import { CatalogComponentProps } from './index';
+import { useStringBinding } from '../../core/hooks';
+
+// Check if text is a star rating pattern (e.g., "★★★★☆")
+function parseStarRating(text: string): number | null {
+ const starPattern = /^[★☆]+$/;
+ if (!starPattern.test(text.trim())) {
+ return null;
+ }
+ const filledStars = (text.match(/★/g) || []).length;
+ return filledStars;
+}
+
+export function Text({ surfaceId, component }: CatalogComponentProps) {
+ const node = component as Types.TextNode;
+ const { text, usageHint } = node.properties;
+
+ const textValue = useStringBinding(text, component, surfaceId);
+
+ if (!textValue) {
+ return null;
+ }
+
+ const style: React.CSSProperties = {
+ flex: component.weight ?? 'initial',
+ };
+
+ // Check if this is a star rating
+ const starRating = parseStarRating(textValue);
+ if (starRating !== null) {
+ return (
+
+ );
+ }
+
+ // Always render with MarkdownRender (consistent with Lit and Angular)
+ // Prepend heading syntax based on usageHint
+ let markdownText = textValue;
+ switch (usageHint) {
+ case 'h1':
+ markdownText = `# ${markdownText}`;
+ break;
+ case 'h2':
+ markdownText = `## ${markdownText}`;
+ break;
+ case 'h3':
+ markdownText = `### ${markdownText}`;
+ break;
+ case 'h4':
+ markdownText = `#### ${markdownText}`;
+ break;
+ case 'h5':
+ markdownText = `##### ${markdownText}`;
+ break;
+ case 'caption':
+ markdownText = `*${markdownText}*`;
+ break;
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/renderers/react/src/components/catalog/TextField.tsx b/renderers/react/src/components/catalog/TextField.tsx
new file mode 100644
index 00000000..d5fbf798
--- /dev/null
+++ b/renderers/react/src/components/catalog/TextField.tsx
@@ -0,0 +1,75 @@
+import React, { useCallback } from 'react';
+import { Input, InputNumber, TextArea } from '@douyinfe/semi-ui';
+import { Types } from '@a2ui/lit/0.8';
+import { CatalogComponentProps } from './index';
+import { useStringBinding, useSetData } from '../../core/hooks';
+
+export function TextField({ surfaceId, component }: CatalogComponentProps) {
+ const node = component as Types.TextFieldNode;
+ const { text, label, type = 'shortText' } = node.properties;
+
+ const textValue = useStringBinding(text ?? null, component, surfaceId);
+ const labelValue = useStringBinding(label, component, surfaceId);
+ const setData = useSetData(component, surfaceId);
+
+ const handleChange = useCallback(
+ (value: string | number) => {
+ if (text && 'path' in text && text.path) {
+ setData(text.path, String(value));
+ }
+ },
+ [text, setData]
+ );
+
+ const style: React.CSSProperties = {
+ flex: component.weight ?? 'initial',
+ width: '100%',
+ };
+
+ const containerStyle: React.CSSProperties = {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: 4,
+ flex: component.weight ?? 'initial',
+ };
+
+ if (type === 'number') {
+ return (
+
+ {labelValue && }
+ handleChange(value ?? 0)}
+ style={style}
+ />
+
+ );
+ }
+
+ if (type === 'longText') {
+ return (
+
+ {labelValue && }
+
+