Lobe UI

Lobe UI 是一个面向 AIGC 网页应用的开源 UI 组件库，内置 300+ AI 模型提供商图标和 90+ 组件，专为流式 Markdown、数学公式、图表渲染及对话界面设计。

核心组件与功能

组件库包含从基础UI到聊天专用组件的完整层级，每个组件均为实时渲染而非截图。

• 流式Markdown渲染: 原生支持GFM表格、任务列表、KaTeX数学公式和Mermaid图表，可处理流式内容
• 聊天组件: 提供Markdown聊天变体，支持代码高亮（shiki语法高亮）、Fluent 3D Emoji和群组头像网格
• 主题切换器: 内置ThemeSwitch组件，支持一键切换亮色/暗色主题
• 快捷键绑定: 支持Ctrl K等自定义热键，提升操作效率
• 颜色选择器: ColorSwatches组件用于快速选取主题色

AI 模型图标库

内置超过300个AI模型提供商图标，覆盖主流和新兴模型品牌。

• 模型覆盖: 包括OpenAI、Claude、Gemini、DeepSeek、Mistral、Qwen、Meta、Grok、Ollama、HuggingFace、OpenRouter、Midjourney等
• 图标类型: 提供AIGC风格的图标集，涵盖模型、提供商和聊天交互标识

设计系统与国际化

提供可定制的设计基础和开箱即用的多语言支持。

• 主题系统: 可自定义颜色、排版、断点等设计令牌，无需运行时样式处理以保持性能
• 国际化: 通过I18nProvider支持18种语言，包括RTL（从右向左）布局
• MDX支持: 内置MDX组件和排版样式，用于渲染内容密集型页面

安装与使用

通过一行命令即可集成到React项目中。

• 安装命令: bun add @lobehub/ui
• 使用方式: 导入组件如Markdown，传入variant='chat'等属性即可渲染对应UI
• 示例代码: 左侧代码片段实时渲染为右侧交互界面，支持多标签切换

常见问题

Q1：Lobe UI 是否支持在流式文本中渲染数学公式和图表？

A1：支持。Markdown组件内置KaTeX数学公式和Mermaid图表渲染，且对流式内容友好，适合AIGC对话场景。

Q2：Lobe UI 的图标库包含哪些AI模型？

A2：内置300+图标，涵盖OpenAI、Claude、Gemini、DeepSeek、Mistral、Qwen、Meta、Grok、Ollama、HuggingFace、OpenRouter、Midjourney等主流及新兴模型提供商。

Q3：Lobe UI 是否支持暗色模式和RTL布局？

A3：支持。通过ThemeSwitch组件可切换亮色/暗色主题；国际化方面通过I18nProvider支持18种语言，包含RTL布局适配。

更多同类工具与网站,可在React分类继续挑选。

信息核实于 2026年7月,具体以官网为准。