Ant Design 再次出手!AIGC UI 組件發(fā)布!
在人工智能技術(shù)飛速發(fā)展的今天,AIGC(生成式 AI)應(yīng)用如雨后春筍般涌現(xiàn)。
為了滿足開(kāi)發(fā)者構(gòu)建 AIGC 網(wǎng)頁(yè)應(yīng)用的需求,一款全新的 UI 組件庫(kù) —— LobeHub UI 正式發(fā)布!

這款組件庫(kù)專為 AI 應(yīng)用而設(shè)計(jì),旨在為開(kāi)發(fā)者提供更高效、更便捷的開(kāi)發(fā)體驗(yàn)。
一、LobeHub UI 簡(jiǎn)介
LobeHub UI 是基于 Ant Design 開(kāi)發(fā)的,完全兼容 Ant Design 組件。
它不僅繼承了 Ant Design 的優(yōu)秀特性,還針對(duì) AIGC 應(yīng)用的特點(diǎn)進(jìn)行了優(yōu)化和擴(kuò)展。

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

二、快速上手
1. 安裝
LobeHub UI 目前僅支持 ESM 模塊化規(guī)范,可通過(guò)以下命令進(jìn)行安裝:
npm install @lobehub/ui如果你正在使用 Next.js,并希望正確實(shí)現(xiàn)服務(wù)器端渲染(SSR),可以在 next.config.js 文件中添加如下配置:
// next.config.js
const nextConfig = {
// 其他配置...
transpilePackages: ['@lobehub/ui'],
};2. 使用示例
LobeHub UI 的組件可以直接與 Ant Design 組件一起使用。以下是一個(gè)簡(jiǎn)單的使用示例:
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 提供了簡(jiǎn)單的主題定制功能,你可以根據(jù)項(xiàng)目需求輕松更改顏色、字體、斷點(diǎn)等樣式元素。
通過(guò) ThemeProvider,你可以快速應(yīng)用自定義主題,打造符合品牌風(fēng)格的用戶界面。
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ùn)行時(shí)添加不必要的樣式屬性,使得整體性能優(yōu)于其他同類 UI 庫(kù)。
這對(duì)于需要處理大量數(shù)據(jù)和復(fù)雜交互的 AIGC 應(yīng)用來(lái)說(shuō)至關(guān)重要。
3. 深色模式支持
LobeHub UI 支持自動(dòng)深色模式識(shí)別。當(dāng)檢測(cè)到 HTML 主題屬性變化時(shí),它會(huì)自動(dòng)切換主題,為用戶提供了一致瀏覽體驗(yàn)。
這對(duì)于需要長(zhǎng)時(shí)間使用的 AIGC 應(yīng)用來(lái)說(shuō)是一個(gè)非常實(shí)用的功能。
四、組件展示
LobeHub UI 提供了豐富的組件,以下對(duì)部分組件做預(yù)覽展示:




LobeHub UI 目前還處于發(fā)展階段,未來(lái)將會(huì)推出更多更新和優(yōu)化。
如果你對(duì)構(gòu)建 AIGC 應(yīng)用感興趣,不妨嘗試使用這個(gè)專為 AI 設(shè)計(jì)的 UI 組件庫(kù)。
這款專為 AI 設(shè)計(jì)的 UI 組件庫(kù),不僅提供了豐富的組件和強(qiáng)大的定制能力,還優(yōu)化了性能和用戶體驗(yàn)。相信在不久的將來(lái),LobeHub UI將成為 AIGC 應(yīng)用開(kāi)發(fā)者的首選工具之一。
- LobeHub UI 官網(wǎng):https://ui.lobehub.com/
- LobeHub UI Github 地址:https://github.com/lobehub/lobe-ui
































