LobeHub UI Kit基于 Ant Design AIGC UI 组件库

技术 2025-06-12 09:43

声明：该文章来自（前端资源推荐）版权由原作者所有，K2OS渲染引擎提供网页加速服务。

文章来自公众号：前端资源推荐

LobeHub UI Kit 是一个开源的 UI 组件库，用于构建人工智能生成内容（AIGC）的 Web 应用。它基于 Ant Design (Antd) 组件开发，完全兼容 Antd 组件，并推荐使用 Antd 风格的 CSS-in-JS 作为默认的样式解决方案。LobeHub UI Kit 提供了一系列丰富的组件，支持主题定制、高性能优化和自动深色模式识别。

功能和特性：

1. 主题化（Themeable）

LobeHub UI Kit 提供了简单的方法来自定义默认主题。您可以根据需要更改颜色、字体、断点等。例如：

import { ThemeProvider } from'@lobehub/ui';
const customTheme = {
colors: {
  primary: '#ff5722',
  secondary: '#2196f3',
},
fonts: {
  body: 'Arial, sans-serif',
},
};
exportdefault () => (
<ThemeProvider theme={customTheme}>
  <Button>Hello AIGC</Button>
  </ThemeProvider>
);

2. 高性能（Fast）

LobeHub UI Kit 在运行时避免不必要的样式属性，使其比其他 UI 库更具性能优势。例如，它通过以下方式优化性能：

避免不必要的重渲染：通过 React 的 memo 和 useMemo 钩子减少不必要的组件重渲染。

优化样式注入：通过 CSS-in-JS 解决方案减少样式注入的开销。

3. 支持深色模式（Light & Dark UI）

LobeHub UI Kit 支持自动识别深色模式。当检测到 HTML 主题属性变化时，自动切换主题。例如：

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

在上述代码中，ThemeProvider 会自动检测 HTML 的 theme 属性变化，并切换主题。

4. 丰富的组件（Rich Components）

LobeHub UI Kit 提供了一系列丰富的组件，包括按钮、输入框、选择器等，满足多种开发需求。例如：

import { Button, Input, Select } from '@lobehub/ui';
export default () => (
  <div>
  <Button type="primary">Primary Button</Button>
  <Input placeholder="Enter text" />
  <Select placeholder="Select an option">
  <Select.Option value="option1">Option 1</Select.Option>
  <Select.Option value="option2">Option 2</Select.Option>
  </Select>
  </div>
);

项目地址

GitHub：https://github.com/lobehub/lobe-ui

官方文档：https://ui.lobehub.com/

关注我们