Repolode
Submit
lobehub

lobehub/lobe-ui

A React component library for building AI chat and AIGC web apps, with chat, Markdown, code and admin UI components.

View on GitHubWebsite
Stars
2,239
Forks
280
Open issues
56
Last commit
8 hours ago

What is it?

Lobe UI is the React component library used by LobeHub, aimed at developers building AI chat interfaces and AIGC web applications. It includes components for rendering LLM output such as Markdown, code blocks, Mermaid diagrams, diffs and HTML previews, along with chat and mobile entry points.

Beyond chat, the library covers general app UI: dashboards, data tables, forms and landing pages share one design language. Theming supports light and dark modes and primary and neutral color switching through a single attribute. English and Simplified Chinese texts are included.

The project is ESM only and requires React 19 plus peer dependencies such as motion, @lobehub/icons and @lobehub/fluent-emoji. Its documentation is also published in formats meant for coding agents, including a skills.md reference and an llms.txt page index.

Key features

  • 01Components for rendering LLM output, including Markdown, code, Mermaid diagrams and diffs.
  • 02Chat and mobile UI entry points for conversational interfaces.
  • 03Dashboard, data table, and form components for admin consoles.
  • 04Light and dark themes with primary and neutral color switching.
  • 05English and Simplified Chinese text bundles included.
  • 06Documentation available in agent-readable formats such as skills.md and llms.txt.

Use cases

  • Building a chat page with a message list and input box for an AI assistant.
  • Rendering streamed Markdown and code output from an LLM in a web app.
  • Creating admin consoles or data tables alongside AI features.
  • Adding light and dark theming to an existing React product.

Quick start

  1. 1

    Install the package and its peer dependencies with pnpm

    pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motion
  2. 2

    Import the theme and style CSS, then wrap your app in ConfigProvider and use a component such as Button

Things to know

  • Requires React 19 and ESM-only consumption, with several peer dependencies to install.
  • Upgrading from 5.x means dropping Ant Design under the v6 migration.

In collections

AI chatbots & chat clientsFrontend frameworks & UI components

Topics

#react#ui-components#design-system#chatbot#llm#typescript#aigc#antd#dumi#lobehub

FAQ

What is lobe-ui?
A React component library for building AI chat and AIGC web apps, with chat, Markdown, code and admin UI components. Lobe UI is the React component library used by LobeHub, aimed at developers building AI chat interfaces and AIGC web applications. It includes components for rendering LLM output such as Markdown, code blocks, Mermaid diagrams, diffs and HTML previews, along with chat and mobile entry points.
Is lobe-ui free to use? What license does it have?
lobe-ui is open source under the MIT license. Check the license terms before using it in commercial products.
Is lobe-ui still maintained?
Actively maintained. The last commit to lobe-ui was on Oct 22, 2026.
What can I use lobe-ui for?
Building a chat page with a message list and input box for an AI assistant. Rendering streamed Markdown and code output from an LLM in a web app. Creating admin consoles or data tables alongside AI features. Adding light and dark theming to an existing React product.
How do I install lobe-ui?
Install the package and its peer dependencies with pnpm: pnpm add @lobehub/ui @lobehub/icons @lobehub/fluent-emoji motion Import the theme and style CSS, then wrap your app in ConfigProvider and use a component such as Button
Where can I get lobe-ui?
The source code and installation instructions are on GitHub: https://github.com/lobehub/lobe-ui

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects