Lobe UI: React component library for AIGC apps, built on Ant Design

An Ant Design wrapper for AIGC web apps, distributed as ESM only

Lobe UI is a React component library for AI-generated content web applications, covering chat interfaces, content generators and AI assistant tools. Its npm package is @lobehub/ui, and it is developed by the LobeHub organization alongside Lobe Chat, Lobe TTS and related tooling.

The library is built on top of Ant Design and is described as fully compatible with antd components. Its recommended CSS-in-JS styling solution is antd-style. Adding @lobehub/ui to a project brings in Ant Design as a peer dependency and orients the styling approach toward antd-style rather than a general-purpose CSS layer.

One constraint applies regardless of the app type: the package is ESM only, and CommonJS projects cannot require it directly without a transpilation layer. The package.json confirms the module type is set to module with no CommonJS fallback, and the README links to a reference explaining the ESM-only package format.

Installing @lobehub/ui and the transpilePackages config for NextJS

Installation uses pnpm, as the README documents.

$ pnpm add @lobehub/ui

For projects using the NextJS page router with server-side rendering, an additional configuration step is required. Without it, the ESM-only package does not work correctly with page router SSR.

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

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

Adding @lobehub/ui to the transpilePackages array tells NextJS to transpile the package during the build. This applies to the page router. No corresponding note for the app router appears in the README, so whether the same fix is needed there is not documented.

ConfigProvider must wrap ThemeProvider: the nesting order and why it matters

ConfigProvider must be the outer wrapper and ThemeProvider must be inside it. Reversing this order is explicitly prohibited: the constraint is stated as 'never the other way round' in the component documentation.

ThemeProvider renders the antd App component, which hosts the static notification and modal holders and reads CDN configuration for webfonts. Both components depend on context that ConfigProvider provides above them in the tree, so ConfigProvider must be the outer parent.

Motion animations require passing a motion component to ConfigProvider. For a standard install, that is the motion export from motion/react.

import { ConfigProvider, ThemeProvider } from '@lobehub/ui';
import { motion } from 'motion/react';

export default () => (
  <ConfigProvider motion={motion}>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </ConfigProvider>
);

For apps using LazyMotion, pass the m namespace from motion/react-m to ConfigProvider instead of the full motion export. A separate code example for the LazyMotion setup appears in the project documentation.

The i18n provider and why component texts props take priority over resource bundles

Lobe UI exposes an I18nProvider component for localizing the text inside components. Importing resource bundles from the subpath exports and passing them in the resources array sets the default text for forms, hotkeys and other components.

import { I18nProvider } from '@lobehub/ui';
import formMessages from '@lobehub/ui/i18n/resources/form';
import hotkeyMessages from '@lobehub/ui/i18n/resources/hotkey';

<I18nProvider resources={[formMessages, hotkeyMessages]}>
  <App />
</I18nProvider>;

A precedence rule applies at the component level: texts props always take priority over what the I18nProvider supplies. A component with its own texts prop set ignores the global bundle for those specific strings. This matters when building multilingual apps where some components need per-instance overrides rather than a shared bundle, since the override is at the prop rather than the provider level.

Named subpath exports for chat, mobile, icons, brand, mdx and color

The package.json exports map exposes specific subpaths alongside the root export. The root import at @lobehub/ui is the main entry point and exposes ThemeProvider, ConfigProvider, I18nProvider and other shared components. Subpath entries include @lobehub/ui/chat, @lobehub/ui/mobile, @lobehub/ui/icons, @lobehub/ui/brand, @lobehub/ui/mdx, @lobehub/ui/color, @lobehub/ui/awesome, @lobehub/ui/i18n and @lobehub/ui/i18n/resources/*.

Each subpath maps to a separate compiled module under the es/ directory, with both .mjs and .d.mts (TypeScript declaration) outputs. Importing from the subpath rather than the root keeps bundlers from pulling in the full library when only one domain is needed.

Separate subpaths for chat and mobile address 2 different rendering environments: conversational interfaces on desktop and compact views on smaller screens. These are distinct subpaths rather than responsive variants of shared components, which means chat-specific components are not included in a mobile-only import.

A duplicate Button import in the README usage example

The basic usage example in the README imports Button from 2 sources in the same code block.

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

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

Both statements bind the identifier Button in the same module scope. In JavaScript, the second import replaces the first binding, so the antd Button ends up in scope, not the @lobehub/ui Button. No instruction to resolve this naming conflict appears in the README, and the example does not use a namespace import or an alias to distinguish them.

Copying this snippet as written produces code that uses antd's Button inside ThemeProvider with no error from the bundler. The component documentation at ui.lobehub.com is the more reliable source for correct usage examples, maintained separately from the GitHub README and updated more frequently than the markdown file.

Alternatives for non-AIGC projects, and why npm is ahead of the most recent tag

For a data-heavy admin app with no chat or AIGC elements, plain antd components cover the same ground without the ConfigProvider layer or the antd-style dependency. Mantine and Chakra UI are React libraries offering similar breadth and do not carry the antd dependency chain, but neither is purpose-built for conversational or AIGC interfaces.

The package.json reports version 5.48.0 and the package is MIT-licensed. The most recent GitHub release tag is v1.165.6 from 2025-03-11, while the last push was on 2026-09-20; the gap of more than 18 months between the last GitHub tag and the current package.json version indicates that new npm versions are being published outside the GitHub releases workflow.

Local development clones the repository and runs pnpm install followed by pnpm start. The documentation site uses dumi, which is reflected in the docs.config.ts and the repository topics.

Editorial conclusion

Lobe UI suits teams building AI chat interfaces or AIGC tooling who are already in the Ant Design ecosystem. The ESM-only constraint rules it out for CommonJS projects, and the ConfigProvider/ThemeProvider nesting order must be followed or motion animations will break. For apps that do not center on chat or AIGC, plain antd components cover most of the same ground without the additional provider layer. Before adopting, confirm the nextjs page router transpilePackages fix applies to your project, and check npm for the current version since the package at 5.48.0 is well ahead of the latest v1.165.6 tag from 2025-03-11.

Frequently asked questions

Official sources

1. License: MIT
2. lobehub/lobe-ui on GitHub
3. Project website
4. README
5. Releases