Lobe UI is an MIT-licensed, TypeScript-first React component library for building AIGC web applications, aimed at front-end teams shipping chat, assistant, and generative-AI interfaces who want Ant Design's foundation with AI-oriented components and providers already wired together.

What it is

Lobe UI is an open-source UI component library for building AIGC web apps, published to npm as @lobehub/ui and maintained under the LobeHub organisation. It lives in the React and TypeScript ecosystem, and its components are developed on top of Ant Design, remaining fully compatible with Antd components. The project recommends antd-style as the default css-in-js styling solution. Documentation lives at ui.lobehub.com, with a changelog in the repository, and the topic list places it alongside antd, dumi, design-system, chatbot, ui-kit, and react.

The concrete problem it solves is the assembly work that sits between Ant Design and a finished AI product interface. Rather than hand-building a theme layer, an internationalisation provider, motion integration, and the static notification and modal holders that Antd requires, a team installs one package and gets ThemeProvider, ConfigProvider, I18nProvider, and a set of exportable components such as Button. It therefore replaces the ad-hoc internal component layer that AI web apps otherwise accumulate on top of Antd.

Key capabilities

• Distributed as @lobehub/ui and installed with pnpm add @lobehub/ui; the package is ESM only.
• Components are built on Ant Design and are fully compatible with Antd components, with antd-style recommended for styling.
• ThemeProvider renders the Antd App that hosts the static notification and modal holders, and reads the CDN config for its webfonts.
• ConfigProvider must receive a motion component and must wrap ThemeProvider, never the other way round; LazyMotion users pass m.
• I18nProvider accepts resource bundles such as @lobehub/ui/i18n/resources/form and @lobehub/ui/i18n/resources/hotkey, and component texts props always take priority.
• Next.js page router SSR support comes from adding transpilePackages: ['@lobehub/ui'] to next.config.js.
• Components are imported directly from the package, for example import { ThemeProvider, Button } from '@lobehub/ui'.

Who uses it and how

• Teams building AIGC web apps in React and TypeScript, where the library supplies the chat-facing interface baseline.
• Next.js applications using the page router with SSR, which configure transpilePackages so the ESM package compiles correctly.
• Product teams already standardised on Ant Design, since adoption is additive and Antd components continue to work alongside the library's own.
• Internationalised products that pull in the form and hotkey message bundles through I18nProvider rather than writing their own string layer.
• Contributors and evaluators, who either use GitHub Codespaces or clone the repository and run pnpm install followed by pnpm start.

Getting started

Install with pnpm add @lobehub/ui, and for Next.js page router SSR add transpilePackages: ['@lobehub/ui'] to next.config.js. For local development, clone https://github.com/lobehub/lobe-ui.git, then run pnpm install and pnpm start, or use GitHub Codespaces.

How it compares

No paid products are listed as being replaced, and the facts name Ant Design as the closest relative. Lobe UI sits on top of Antd rather than competing with it, since its components are built on Antd and remain fully compatible, and it composes with antd-style for styling and motion/react for animation.

When to use it — and when not to

Because the package is ESM only, teams on CommonJS-only toolchains or bundlers without ESM handling must expect build configuration work, and every consumer has to wire ConfigProvider above ThemeProvider with a motion component or the notification and modal holders lose their context. There is no database, storage, or SMTP to operate, so the operational burden is a normal front-end build pipeline rather than self-hosted infrastructure. Teams outside React and TypeScript, or those not building on Ant Design, should look elsewhere, and anyone needing a full component inventory should read ui.lobehub.com rather than the README, which stays sparse and leaves 61 open issues as the visible signal of ongoing work.

$ pnpm add @lobehub/ui

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

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

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

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

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>;

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

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

import { ConfigProvider, ThemeProvider } from '@lobehub/ui';
import { LazyMotion, domAnimation } from 'motion/react';
import * as m from 'motion/react-m';

export default () => (
  <LazyMotion features={domAnimation}>
    <ConfigProvider motion={m}>
      <ThemeProvider>
        <App />
      </ThemeProvider>
    </ConfigProvider>
  </LazyMotion>
);

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