炸裂！号称为 AIGC 应用而生的UI库长这样~

大家好，我是「前端实验室」爱分享的了不起~

刚刚发现一个有趣的组件库，官方介绍是为了构建 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阶段，大家可以参阅官方地址参阅详情。

官方地址 https://ui.lobehub.com/

期待后续LobeUI更多的更新！