lobehub/lobe-ui

乐贝UI

AI- Native Web Apps 的反用 UI 套件

LobeHub的开源React组件库用于构建AI聊天和AIGC网络应用.

文件 · 更改日志 · [报告bug][github-issues-link] · [请求特性][github-issues-link]

目录

技术选择委员会

• 为什么是Lobe UI?
• 开始
• AI授权开发
• 输入点
• 文档
• 社区
• 地方发展
• 贡献
• 赞助商
• 链接

为什么是Lobe UI?

Lobe UI是LobeHub背后的React组件库,为构建AI聊天和AIGC网络应用而制作.

• ** AI apps的构建**:不从零开始构建LLM输出(Markdown,代码,美人鱼图,diffs,HTML预览)和飞船聊天界面.
• ** 从登陆网页到管理员控制台**:一种设计语言,跨越聊天、仪表板、数据表、表格和营销网页。
• ** 单行中的主题**:光和暗模式加上主色和中色的开关,带有单一属性,第一负载上没有闪光.
• ** 容易重塑**:稳定的类名允许您覆盖任何带有平面 CSS 或 Tailwind 的组件。
• ** 全球用户准备**: 包括英文和简化中文文本.

✨ Why Lobe UI?

Lobe UI is the React component library behind LobeHub, made for building AI chat and AIGC web apps.

• Built for AI apps: render LLM output (Markdown, code, Mermaid diagrams, diffs, HTML previews) and ship chat interfaces without building them from scratch.
• From landing page to admin console: one design language across chat, dashboards, data tables, forms and marketing pages.
• Theme in one line: light and dark modes plus primary and neutral colors switch with a single attribute, with no flash on first load.
• Easy to restyle: stable class names let you override any component with plain CSS or Tailwind.
• Ready for global users: English and Simplified Chinese texts included.
• AI-native docs: coding agents read every component’s usage and props through skills.md and llms.txt.

🚀 Getting Started

[![][pnpm-shield]][pnpm-link]

$ pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motion

Lobe UI is ESM only and needs React 19, motion 13 or 14, @lobehub/icons 6 and @lobehub/fluent-emoji 5 as peer dependencies.

import '@lobehub/ui/theme.css';
import '@lobehub/ui/style.css';

import { Button, ConfigProvider } from '@lobehub/ui';
import { motion } from 'motion/react';

export default () => (