大家好，我是「程序视点」爱分享的小二哥~
刚刚发现一个有趣的组件库，官方介绍是为了构建 AIGC 网页应用而生的组件库。这不~就赶紧和大家一起分享！
简介
LobeHub UI 是一个基于Antd组件开发，完全兼容Antd组件的，可以快速构建 AIGC 项目的组件库。
推荐使用 antd-style 作为默认的 css-in-js 样式解决方案。LobeHub UI 只是Lobe产品系列中的一个。它是如何用于 AIGC 应用的呢？我们接着来看。
安装和使用
安装
LobeHub 目前仅支持 ESM 模块化规范。我们可以直接通过以下命令进行安装
bun add @lobehub/ui
----
npm install @lobehub/ui
如果希望在使用Next.js进行编译，同时正确使用Next.js的SSR（服务器端渲染），可以在next.config.js文件中添加transpilePackages: ['@lobehub/ui']。
// next.config.js
const nextConfig = {
// ...other config
transpilePackages: ['@lobehub/ui'],
};
使用
刚才说了，LobeUI 组件是基于 Antd 开发的，完全兼容 Antd 组件。可以一起使用。
import { ThemeProvider, Button } from '@lobehub/ui'
import { Button } from 'antd'
export default () => (
<ThemeProvider>
<Button>Hello AIGC</Button>
</ThemeProvider>
)
好啦~怎么说它是用来构建AIGC的呢？举个官方按钮组的例子。右边有对按钮组的设定。下边是横排显示
下边是纵排显示
还有类型样式选择
当然每个组件可供选项不一样，且目前还只是简单AIGC阶段，大家可以参阅官方地址参阅详情。
官方地址
ui.lobehub.com/
期待后续LobeUI更多的更新！
最后
欢迎来到【程序时刻】，这里会不定时分享一些技术要点，更有一些深受资源收藏爱好者会喜欢的优质学习资料。
如果您对程序员日常趣事、编程技巧和技术干货等充满兴趣，那么不要错过未来我为大家奉上的精彩内容！点击关注，让您的程序员之旅更加丰富多彩，我们一同成长，一同前行！🚀💻📚
