lobe-ui

环境要求

• Node.js 环境，并使用 pnpm 包管理器（README 中安装命令为 pnpm add）
• 项目需支持 ESM，该包为 ESM only，不支持 CommonJS require
• React 项目（组件库基于 React + TypeScript 构建）
• 使用 Next.js page router 的 SSR 时需要额外配置 transpilePackages

安装与启动步骤

1. 1安装 lobe-ui

   在 React / Next.js 项目根目录执行，把 @lobehub/ui 加入项目依赖；注意该包仅提供 ESM 格式。

   pnpm add @lobehub/ui

   复制

2. 2配置 Next.js

   仅在使用 Next.js page router SSR 时需要，在 next.config.js 中加入 transpilePackages 数组，否则打包/SSR 会报错。

3. 3包裹主题 Provider

   用 @lobehub/ui 提供的 ThemeProvider 包裹应用根节点，为内部所有组件提供默认主题与样式上下文。

   import { ThemeProvider, Button } from '@lobehub/ui';
   import { Button } from 'antd';
   
   export default () => (
     <ThemeProvider>
       <Button>Hello AIGC</Button>
     </ThemeProvider>
   );

   复制

4. 4使用组件

   从 @lobehub/ui 引入聊天消息列表、输入框等组件；Lobe UI 组件基于 Antd，可与 Antd 组件混用。

关键配置

如何确认成功

页面成功渲染出被 ThemeProvider 包裹的按钮并显示 “Hello AIGC”，说明组件与主题已正常加载。

常见问题

注意事项

• 该包为 ESM only，CommonJS 项目无法直接 require。
• Lobe UI 组件基于 Antd 构建，完全兼容 Antd 组件。
• 官方推荐使用 antd-style 作为默认的 css-in-js 样式方案。
• README 未给出本地开发（Local Development）的具体命令，如需参与开发请查阅仓库文档。