lobehub/lobe-ui

🍭 Lobe UI - an open-source UI component library for building AIGC web apps

Lobe UI

Lobe UI is an open-source UI component library for building AIGC web apps

English ・ 简体中文 ・ Changelog · Report Bug · Request Feature

Table of contents

TOC

• 📦 Installation
  • Compile with NextJS
• 🤯 Usage
• ⌨️ Local Development
• 🤝 Contributing
• 🔗 More Products

📦 Installation

Important

This package is ESM only.

To install Lobe UI, run the following command:

$ bun add @lobehub/ui

Compile with NextJS

Note

By work correct with nextjs page router SSR, add transpilePackages: ['@lobehub/ui'] to next.config.js. For example:

// next.config.js
const nextConfig = {
  // ...other config

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

🤯 Usage

Note

The LobeUI components are developed based on Antd, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.

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

export default () => (
  <ThemeProvider>
    <Button>Hello AIGC</Button>
  </ThemeProvider>
)

⌨️ Local Development

You can use Github Codespaces for online development:

Or clone it for local development:

$ git clone https://github.com/lobehub/lobe-ui.git
$ cd lobe-ui
$ bun install
$ bun start

🤝 Contributing

Contributions of all types are more than welcome, if you are interested in contributing code, feel free to check out our GitHub Issues to get stuck in to show us what you’re made of.

🩷 Sponsor

Every bit counts and your one-time donation sparkles in our galaxy of support! You're a shooting star, making a swift and bright impact on our journey. Thank you for believing in us – your generosity guides us toward our mission, one brilliant flash at a time.

🔗 More Products

• 🤖 Lobe Chat : An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application.
• 🤯 Lobe Theme : The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
• 🥨 Lobe Icons : Popular AI / LLM Model Brand SVG Logo and Icon Collection.
• 🌏 Lobe i18n : Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature.
• 💌 Lobe Commit : Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.

---

📝 License

Copyright © 2023 LobeHub.
This project is MIT licensed.

lobe-ui's Issues

[Request] this is no description of List, ListItemProps which were used in lobe chat

🥰 需求描述 | Feature Description

I found lobe chat used List, ListItemProps to render session list, I'm a little confused about how to use them and cannot find descriotion in lobe UI docs, do you have plan to add them to docs?

🧐 解决方案 | Proposed Solution

add docs of List, ListItemProps

📝 补充信息 | Additional Information

Thanks very much

[Question]vue项目可以用吗

🧐 问题描述 | Proposed Solution

vue项目npm i npm i @lobehub/ui报错

📝 补充信息 | Additional Information

No response

[Request]

🥰 需求描述 | Feature Description

Could you please consider adding treeshaking to the project after packaging? The Katex site seems to be using a lot of resources, and this optimization could help improve its performance.

🧐 解决方案 | Proposed Solution

使用treesharking

📝 补充信息 | Additional Information

No response

[Question] 怎么在shadow dom中使用？

🧐 问题描述 | Proposed Solution

我需要在shadow dom中使用这套组件库，但是组件库默认把style注入到了根节点中，导致样式丢失
antd 提供了解决方案，但是在这个组件库中并没有生效
https://ant-design.antgroup.com/docs/react/compatible-style-cn#shadow-dom-%E5%9C%BA%E6%99%AF

📝 补充信息 | Additional Information

No response

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• Update dependency uuid to v10

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @types/react to v18.3.3
• Update dependency dumi to v2.3.8
• Update dependency father to v4.4.4
• Update dependency vitest to ~1.6.0
• Update dependency @splinetool/runtime to v1
• Update dependency @testing-library/react to v16
• Update dependency eslint to v9
• Update dependency semantic-release to v24
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update dependency react-markdown to v9
• Update dependency rehype-katex to v7
• Update dependency remark to v15
• Update dependency remark-cli to v12
• Update dependency remark-gfm to v4
• Update dependency remark-math to v6
• Update dependency stylelint to v16

Detected dependencies

github-actions

.github/workflows/issue-auto-comments.yml

• wow-actions/auto-comment v1
• wow-actions/auto-comment v1
• wow-actions/auto-comment v1
• actions-cool/issues-helper v3

.github/workflows/issue-check-inactive.yml

• actions-cool/issues-helper v3

.github/workflows/issue-close-require.yml

• actions-cool/issues-helper v3
• actions-cool/issues-helper v3
• actions-cool/issues-helper v3

.github/workflows/release.yml

• actions/checkout v4
• oven-sh/setup-bun v1

.github/workflows/test.yml

• actions/checkout v4
• oven-sh/setup-bun v1
• codecov/codecov-action v4

npm

package.json

• @ant-design/colors ^7.0.2
• @ant-design/icons ^5.3.7
• @babel/runtime ^7.24.7
• @dnd-kit/core ^6.1.0
• @dnd-kit/modifiers ^7.0.0
• @dnd-kit/sortable ^8.0.0
• @dnd-kit/utilities ^3.2.2
• @emoji-mart/data ^1.2.1
• @emoji-mart/react ^1.1.1
• @floating-ui/react ^0.26.16
• @giscus/react ^3.0.0
• @react-spring/web ^9.7.3
• @shikijs/transformers ^1.6.3
• @splinetool/runtime ^0.9.526
• ahooks ^3.8.0
• chroma-js ^2.4.2
• dayjs ^1.11.11
• emoji-mart ^5.6.0
• emoji-regex ^10.3.0
• fast-deep-equal ^3.1.3
• immer ^10.1.1
• leva ^0.9.35
• lodash-es ^4.17.21
• numeral ^2.0.6
• polished ^4.3.1
• prism-react-renderer ^2.3.1
• query-string ^9.0.0
• rc-footer ^0.6.8
• re-resizable ^6.9.17
• react-error-boundary ^4.0.13
• react-layout-kit ^1.9.0
• react-markdown ^8.0.7
• react-merge-refs ^2.1.1
• react-rnd ^10.4.11
• react-simple-code-editor ^0.13.1
• rehype-katex ^6.0.3
• rehype-raw ^7.0.0
• remark-breaks ^4.0.0
• remark-gfm ^3.0.1
• remark-math ^5.1.1
• shiki ^1.6.3
• swr ^2.2.5
• ts-md5 ^1.3.1
• url-join ^5.0.0
• use-merge-value ^1.2.0
• uuid ^9.0.1
• zustand ^4.5.2
• zustand-utils ^1.3.2
• @commitlint/cli ^19.3.0
• @lobehub/lint ^1.23.4
• @testing-library/react ^14.3.1
• @types/chroma-js ^2.4.4
• @types/lodash-es ^4.17.12
• @types/mdx ^2.0.13
• @types/numeral ^2.0.5
• @types/pangu ^4.0.2
• @types/query-string ^6.3.0
• @types/react 18.2.40
• @types/react-dom ^18.3.0
• @types/uuid ^9.0.8
• @vitest/coverage-v8 ^1.6.0
• antd-style ^3.6.2
• commitlint ^19.3.0
• concurrently ^8.2.2
• cross-env ^7.0.3
• dpdm ^3.14.0
• dumi 2.2.17
• eslint ^8.57.0
• father 4.3.1
• husky ^9.0.11
• jsdom ^24.1.0
• lint-staged ^15.2.5
• prettier ^3.3.1
• react ^18.3.1
• react-dom ^18.3.1
• remark ^14.0.3
• remark-cli ^11.0.0
• semantic-release ^21.1.2
• stylelint ^15.11.0
• stylelint-use-logical-spec ^5.0.1
• typescript ^5.4.5
• vitest ~1.2.2
• antd >=5.13.0
• antd-style >=3
• react >=18
• react-dom >=18

---

• Check this box to trigger a request for Renovate to run again on this repository

[Bug] Module not found: Error: Can't resolve '@splinetool/runtime'

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

error - ./node_modules/@splinetool/react-spline/dist/react-spline.js:2:0-56
Module not found: Error: Can't resolve '@splinetool/runtime'

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

No response

[Bug] Homepage's button has some trouble in a specific action.

💻 系统环境 | Operating System

macOS

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

at the Lobe UI homepage.

https://ui.lobehub.com/

At the webpage of intro about the Fast section icon.
when pointer over the Icon of the fast icon , the below editor's icons can't reacted.

Maybe this effect would occur in other same scenes.

🚦 期望结果 | Expected Behavior

the defualt pointer with the editor buttons when after the hover Fast Icon.

📷 复现步骤 | Recurrence Steps

📝 补充信息 | Additional Information

No response

[Bug] firefox context menu position issue

💻 系统环境 | Operating System

macOS

🌐 浏览器 | Browser

Firefox

🐛 问题描述 | Bug Description

https://ui.lobehub.com/components/context-menu

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

No response

[Question] Is the web corresponding to the ui docs open source?

🧐 问题描述 | Proposed Solution

Or the docs web is based on your team's work or others open source framework?
Thanks.

📝 补充信息 | Additional Information

No response

[Question] 太喜欢这些icon了，不知道哪里才可以下载到这完整的包

🧐 问题描述 | Proposed Solution

📝 补充信息 | Additional Information

No response

[Bug] 官方首页例子中 Button 重复引入

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

🚦 期望结果 | Expected Behavior

应该是直接从 antd 中引入 Button ？

📷 复现步骤 | Recurrence Steps

访问 https://ui.lobehub.com/ 即可

📝 补充信息 | Additional Information

No response

CodeEditor 高亮暂时移除

[Request] 期望 Avatar 组件支持传入 ReactNode，以进行自定义

🥰 需求描述 | Feature Description

Ant Design 的 Avatar 的 src 属性 是支持 ReactNode 的

目前的 lobe-ui 的实现不支持

期望支持下

🧐 解决方案 | Proposed Solution

修改 Avatar 组件的代码解决

我修改了下代码，提交PR：#100

📝 补充信息 | Additional Information

No response

[Request] Use Non-Chinese CDN

🥰 需求描述 | Feature Description

Chinese Great Firewall seems to be blocking my (static, unchangeable) IPs.

🧐 解决方案 | Proposed Solution

Upload the assets that are fetched from CDN to a different CDN, like jsDelivr or CDNjs.

📝 补充信息 | Additional Information

$ curl -v https://npm.elemecdn.com
*   Trying 180.163.40.36:443...
* connect to 180.163.40.36 port 443 failed: Connection timed out
*   Trying 180.163.40.38:443...
* After 84400ms connect time, move on!
* connect to 180.163.40.38 port 443 failed: Connection timed out
*   Trying 180.163.40.41:443...
* After 42200ms connect time, move on!
* connect to 180.163.40.41 port 443 failed: Connection timed out
*   Trying 180.163.40.35:443...
* After 21099ms connect time, move on!
* connect to 180.163.40.35 port 443 failed: Connection timed out
*   Trying 180.163.40.37:443...
* After 10549ms connect time, move on!
* connect to 180.163.40.37 port 443 failed: Connection timed out
*   Trying 180.163.40.34:443...
* After 5275ms connect time, move on!
* connect to 180.163.40.34 port 443 failed: Connection timed out
*   Trying 180.163.40.19:443...
* After 2636ms connect time, move on!
* connect to 180.163.40.19 port 443 failed: Connection timed out
* Failed to connect to npm.elemecdn.com port 443: Connection timed out
* Closing connection 0
curl: (28) Failed to connect to npm.elemecdn.com port 443: Connection timed out

[RFC] Lobe UI 2.0

Note

RFC 构思阶段，欢迎讨论 ref: #136

• 更清晰的入口文件分类
• 提升组件性能 (样式注入+组件层级)
• 更规范主流的接口设计
• 更好的 i18next 支持

[Bug] CheckBox 在深色模式显示异常

💻 系统环境 | Operating System

macOS

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

看不太清，浅色模式正常

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

📝 补充信息 | Additional Information

No response

[Request] ActionIconGroup items support `disabled` prop

🥰 需求描述 | Feature Description

ActionIconGroup items prop support disabled prop.
When disabled is set to true, the icon is disabled and cannot be selected.

const items: ActionIconGroupProps['items'] = [
{
icon: Copy,
key: 'copy',
label: 'Copy',
disabled: true
},
{
icon: RotateCw,
key: 'regenerate',
label: 'Regenerate',
},
];

🧐 解决方案 | Proposed Solution

add disabled prop

📝 补充信息 | Additional Information

No response

markdown 中 的 pre code 样式

[Question] 移动端无法显示 tooltip

🧐 问题描述 | Proposed Solution

经查，由下述代码阻止，不太清楚用意。

lobe-ui/src/ThemeProvider/GlobalStyle/antdOverride.ts

Lines 78 to 83 in eb219b7

	@media (max-width: 575px) {
	.${token.prefixCls}-tooltip {
	display: none !important;
	}
	}
	`;

📝 补充信息 | Additional Information

此外 tooltip 亦可适配暗色主题。

可能相关 lobehub/lobe-chat#1762

[Bug] 文档中CodeSandbox无法使用

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

https://ui.lobehub.com/components 中尝试打开任何一个CodeSandbox都会失败，每一个都显示ModuleNotFoundError Could not find module in path: 'lucide-react/dist/esm/icons/fingerprint.js' relative to '/node_modules/lucide-react/dist/esm/icons/index.js'

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

以下是完整报错：

ModuleNotFoundError
Could not find module in path: 'lucide-react/dist/esm/icons/fingerprint.js' relative to '/node_modules/lucide-react/dist/esm/icons/index.js'
▼ 23 stack frames were expanded.
ve.resolveModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:124705
ve.resolveTranspiledModuleSync
https://codesandbox.io/static/js/sandbox.781f63989.js:1:125596
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106358
$csb$eval
https://gzq947.csb.app/node_modules/lucide-react/dist/esm/icons/index.js:4603:58
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106456
$csb$eval
https://gzq947.csb.app/node_modules/lucide-react/dist/esm/lucide-react.js:111:29
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106456
    at $csb$eval (https://gzq947.csb.app/node_modules/
lobehub/ui/es/ActionIcon/index.js:9:26
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106456
    at $csb$eval (https://gzq947.csb.app/node_modules/
lobehub/ui/es/index.js:7:54
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106456
▲ 23 stack frames were expanded.
$csb$eval
/App.tsx:1
> 1 | import { SliderWithInput } from '@lobehub/ui';
  2 | 
  3 | export default () => {
  4 |   return <SliderWithInput />;
View compiled
▼ 4 stack frames were expanded.
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
c
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106456
▲ 4 stack frames were expanded.
$csb$eval
/index.tsx:10
   7 | 
   8 | import React from 'react';
   9 | import { createRoot } from "react-dom/client";
> 10 | import App from "./App";
  11 | 
  12 | const rootElement = document.getElementById("root");
  13 | const root = createRoot(rootElement);
View compiled
▼ 7 stack frames were expanded.
z
https://codesandbox.io/static/js/sandbox.781f63989.js:1:94122
K.evaluate
https://codesandbox.io/static/js/sandbox.781f63989.js:1:106841
ve.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:117222
ve.evaluateModule
https://codesandbox.io/static/js/sandbox.781f63989.js:1:116721
(anonymous function)
https://codesandbox.io/static/js/sandbox.781f63989.js:1:278474
r
https://codesandbox.io/static/js/common-sandbox.09f563264.chunk.js:1:606
a
https://codesandbox.io/static/js/common-sandbox.09f563264.chunk.js:1:817
▲ 7 stack frames were expanded.

[Bug] Highlighter theme is not working

💻 系统环境 | Operating System

macOS

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

Highlighter theme is not working

🚦 期望结果 | Expected Behavior

Working properly

📷 复现步骤 | Recurrence Steps

Visit doc

📝 补充信息 | Additional Information

No response

Lobe UI FOUC (flash of unstyled content)

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

It seems like ui.lobehub.com is using react server components that's why the actual theme changes after some time which causes the screen to flash white for a second before showing the dark theme.

🚦 期望结果 | Expected Behavior

Please can you guide how can we prevent FOUC (flash of unstyled content) when using react server components in Next Js 13 App directory?

📷 复现步骤 | Recurrence Steps

2023-12-26.00-17-46.mp4

📝 补充信息 | Additional Information

No response

[Question] difference between [pro-chat](https://pro-chat.antdigital.dev/components/editable-message-list)?

🧐 问题描述 | Proposed Solution

i found the editable-message-list is same as antd/editable-message-list.

Are lobe-ui and pro-chat the same project?

📝 补充信息 | Additional Information

No response

[Bug] 在输入带换行的长文本时chatitem返回内容不换行

💻 系统环境 | Operating System

Windows

🌐 浏览器 | Browser

Chrome

🐛 问题描述 | Bug Description

输入文案

在该平台的展示效果

因为css中缺少了white-space: pre-wrap;

🚦 期望结果 | Expected Behavior

No response

📷 复现步骤 | Recurrence Steps

No response

📝 补充信息 | Additional Information

通过排查，应该添加在 lobe-ui/src/ChatItem
/style.ts 中

[chat]对话气泡 hover 快捷条过长, 不超过3个功能，功能按角色进行区分

[Request] ChatItem/EditableMessage里的markdown增加图表展示

🥰 需求描述 | Feature Description

希望可以在markdown中添加图表展示

🧐 解决方案 | Proposed Solution

增加类似echarts/chart.js的数据兼容，或者提供扩展

📝 补充信息 | Additional Information

No response

[Request] : markdown不支持添加脚注

🥰 需求描述 | Feature Description

markdown不支持添加脚注，希望能够实现如下功能

还有一个功能也需要提供下支持，如下，鼠标移入可展示tips文本：

🧐 解决方案 | Proposed Solution

markdown不支持添加脚注

📝 补充信息 | Additional Information

No response