在人工智能技術飛速發(fā)展的今天，AIGC（生成式 AI）應用如雨后春筍般涌現(xiàn)。

為了滿足開發(fā)者構建 AIGC 網頁應用的需求，一款全新的 UI 組件庫 —— LobeHub UI 正式發(fā)布！

這款組件庫專為 AI 應用而設計，旨在為開發(fā)者提供更高效、更便捷的開發(fā)體驗。

一、LobeHub UI 簡介

LobeHub UI 是基于 Ant Design 開發(fā)的，完全兼容 Ant Design 組件。

它不僅繼承了 Ant Design 的優(yōu)秀特性，還針對 AIGC 應用的特點進行了優(yōu)化和擴展。

LobeHub UI 推薦使用 antd-style 作為默認的 CSS-in-JS 樣式解決方案，以提供更靈活的樣式定制能力。

二、快速上手

1. 安裝

LobeHub UI 目前僅支持 ESM 模塊化規(guī)范，可通過以下命令進行安裝：

npm install @lobehub/ui

如果你正在使用 Next.js，并希望正確實現(xiàn)服務器端渲染（SSR），可以在 next.config.js 文件中添加如下配置：

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

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

2. 使用示例

LobeHub UI 的組件可以直接與 Ant Design 組件一起使用。以下是一個簡單的使用示例：

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

export default () => (
  <ThemeProvider>
    <Button>Hello AIGC</Button>
    <AntdButton type="primary">Primary Button</AntdButton>
  </ThemeProvider>
);

三、特色功能

1. 主題定制

LobeHub UI 提供了簡單的主題定制功能，你可以根據(jù)項目需求輕松更改顏色、字體、斷點等樣式元素。

通過 ThemeProvider，你可以快速應用自定義主題，打造符合品牌風格的用戶界面。

import { ConfigProvider, Logo } from '@lobehub/ui';

export default () => {
  return (
    <ConfigProvider cnotallow={{
        proxy: 'custom',
        customCdnFn: (e: {pkg:string, version:string, path:string}) => `https://yourcdn/${pkg}/${version}/${path}`
    }}>
      <Logo />
    </ConfigProvider>
  );
};

2. 高性能

LobeHub UI 在性能方面表現(xiàn)出色。

它避免了在運行時添加不必要的樣式屬性，使得整體性能優(yōu)于其他同類 UI 庫。

這對于需要處理大量數(shù)據(jù)和復雜交互的 AIGC 應用來說至關重要。

3. 深色模式支持

LobeHub UI 支持自動深色模式識別。當檢測到 HTML 主題屬性變化時，它會自動切換主題，為用戶提供了一致瀏覽體驗。

這對于需要長時間使用的 AIGC 應用來說是一個非常實用的功能。

四、組件展示

LobeHub UI 提供了豐富的組件，以下對部分組件做預覽展示：

LobeHub UI 目前還處于發(fā)展階段，未來將會推出更多更新和優(yōu)化。

如果你對構建 AIGC 應用感興趣，不妨嘗試使用這個專為 AI 設計的 UI 組件庫。

這款專為 AI 設計的 UI 組件庫，不僅提供了豐富的組件和強大的定制能力，還優(yōu)化了性能和用戶體驗。相信在不久的將來，LobeHub UI將成為 AIGC 應用開發(fā)者的首選工具之一。

• LobeHub UI 官網：https://ui.lobehub.com/
• LobeHub UI Github 地址：https://github.com/lobehub/lobe-ui