大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。
大家好，我是「前端实验室」爱分享的了不起~
刚刚发现一个有趣的组件库，官方介绍是为了构建 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/uiimport { Button } from antdexportdefault () => (
)
好啦~怎么说它是用来构建AIGC的呢？举个官方按钮组的例子。
右边有对按钮组的设定。下边是横排显示
下边是纵排显示
还有类型样式选择
当然每个组件可供选项不一样，且目前还只是简单AIGC阶段，大家可以参阅官方地址参阅详情。
官方地址
https://ui.lobehub.com/期待后续LobeUI更多的更新！
最后
欢迎加入前端实验室读者交流群，分享交流优秀的技术和资料。
如果这篇文章对你有用的话，请大家多多 [点赞]，给一个小小的鼓励吧~
