目录

目录

• 📦 安装
  • 使用 NextJS 编译
• 🤯 使用
  • I18n
  • ConfigProvider (Motion)
• ⌨️ 本地开发
• 🤝 贡献
• 🩷 赞助
• 🔗 链接
  • 更多产品
  • 设计资源
  • 开发资源

📦 安装

[!IMPORTANT]
本包仅支持 ESM 格式（https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c）。

要安装 Lobe UI，请运行以下命令：

$ bun add @lobehub/ui

使用 NextJS 编译

[!NOTE]
为了与 Next.js 页面路由的 SSR 正确配合，请在 next.config.js 中添加 transpilePackages: ['@lobehub/ui']。例如：

// next.config.js
const nextConfig = {
  // ...其他配置

  transpilePackages: ['@lobehub/ui'],
};

🤯 使用

[!NOTE]
LobeUI 组件基于 Antd 开发，完全兼容 Antd 组件， 建议使用 antd-style 作为默认的 css-in-js 样式解决方案。

import { ThemeProvider, Button } from '@lobehub/ui';
import { Button } from 'antd';

export default () => (
  <ThemeProvider>
    <Button>Hello AIGC</Button>
  </ThemeProvider>
);

I18n

使用带有资源包的 i18n 提供程序。组件的 texts 属性始终具有最高优先级。

import { I18nProvider } from '@lobehub/ui';
import formMessages from '@lobehub/ui/i18n/resources/form';
import hotkeyMessages from '@lobehub/ui/i18n/resources/hotkey;

<I18nProvider resources={[formMessages, hotkeyMessages]}>
  <App />
</I18nProvider>;

ConfigProvider (Motion)

必须通过 ConfigProvider 传递一个 motion 组件。 如果您的应用使用 LazyMotion，请传递 m：

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

export default () => (
  <ConfigProvider motion={motion}>
    <App />
  </ConfigProvider>
);

如果您的应用使用 LazyMotion：

import { ConfigProvider } from '@lobehub/ui';
import { LazyMotion、domAnimation } from 'motion/react';
import * as m from 'motion/react-m';

export default () => (
  <LazyMotion features={domAnimation}>
    <ConfigProvider motion={m}>
      <App />
    </ConfigProvider>
  </LazyMotion>
);

⌨️ 本地开发

您可以使用 Github Codespaces 进行在线开发：

或者克隆代码进行本地开发：

$ git clone https://github.com/lobehub/lobe-ui.git
$ cd lobe-ui
$ bun install
$ bun start

🤝 贡献

我们非常欢迎各种形式的贡献。如果您有兴趣参与代码贡献，请随时查看我们的 GitHub Issues，加入其中，向我们展示您的实力。

🩷 赞助

每一份支持都至关重要，您的一次性捐赠将在我们的支持星空中熠熠生辉！您就像一颗流星，在我们的旅程中划出一道耀眼的光芒。感谢您对我们的信任——您的慷慨正引领我们一步步实现使命，每一次闪耀都是前进的动力。

🔗 链接

更多产品

• 🤯 Lobe Chat - 一个 open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application.
• 🅰️ Lobe Theme - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
• 🧸 Lobe Vidol - Experience the magic of virtual idol creation with Lobe Vidol, enjoy the elegance of our Exquisite UI Design, dance along using MMD Dance Support, and engage in Smooth Conversations.

设计资源

• 🍭 Lobe UI - An open-source UI component library for building AIGC web apps.
• 🥨 Lobe Icons - Popular AI / LLM Model Brand SVG Logo and Icon Collection.
• 📊 Lobe Charts - React modern charts components built on recharts

开发资源

• 🎤 Lobe TTS - 一款高质量且可靠的 TTS/STT 库，适用于服务器端和浏览器端
• 🌏 Lobe i18n - 用于国际化（i18n）翻译流程的自动化 AI 工具。

更多资源

---

📝 许可证

版权所有 © 2023 LobeHub。
本项目采用 MIT 许可证。

Lobe UI 快速上手指南

Lobe UI 是一个专为构建 AIGC Web 应用 设计的开源 UI 组件库。它基于 Ant Design 开发，完全兼容 Antd 组件，并推荐搭配 antd-style 使用。

环境准备

• 包管理器：推荐使用 Bun 以获得最佳性能（也支持 npm/yarn/pnpm）。
• 模块系统：本包仅支持 ESM (ECMAScript Modules)，请确保你的项目配置为 ESM 模式。
• 框架兼容性：
  • 通用 React 项目可直接使用。
  • Next.js 用户注意：若使用 Page Router 且需支持 SSR，必须在 next.config.js 中配置转译。

安装步骤

使用 Bun 安装（推荐）：

bun add @lobehub/ui

若使用 Next.js，请在 next.config.js 中添加以下配置以确保 SSR 正常工作：

// next.config.js
const nextConfig = {
  // ...其他配置

  transpilePackages: ['@lobehub/ui'],
};

module.exports = nextConfig;

基本使用

1. 基础组件渲染

Lobe UI 提供了 ThemeProvider 来包裹应用。以下是结合 Antd 按钮的最简示例：

import { ThemeProvider, Button } from '@lobehub/ui';
// 也可以直接使用 antd 的组件，它们是完全兼容的
import { Button as AntButton } from 'antd';

export default () => (
  <ThemeProvider>
    <Button>Hello AIGC</Button>
  </ThemeProvider>
);

2. 配置动画 (Motion)

如果需要使用动效，必须通过 ConfigProvider 传入 motion 实例。

方案 A：标准模式

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

export default () => (
  <ConfigProvider motion={motion}>
    {/* 你的应用内容 */}
  </ConfigProvider>
);

方案 B：配合 LazyMotion (按需加载)

import { ConfigProvider } from '@lobehub/ui';
import { LazyMotion, domAnimation } from 'motion/react';
import * as m from 'motion/react-m';

export default () => (
  <LazyMotion features={domAnimation}>
    <ConfigProvider motion={m}>
      {/* 你的应用内容 */}
    </ConfigProvider>
  </LazyMotion>
);

3. 国际化 (I18n)

使用 I18nProvider 加载资源包。注意：组件自身的 texts 属性优先级高于全局配置。

import { I18nProvider } from '@lobehub/ui';
import formMessages from '@lobehub/ui/i18n/resources/form';
import hotkeyMessages from '@lobehub/ui/i18n/resources/hotkey';

export default () => (
  <I18nProvider resources={[formMessages, hotkeyMessages]}>
    {/* 你的应用内容 */}
  </I18nProvider>
);