Lobe UI

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

Documents · Changelog · Report Bug · Request Feature

Table of contents

TOC

• 📦 Installation
  • Compile with NextJS
• 🤯 Usage
  • I18n
  • ConfigProvider (Motion)
• ⌨️ Local Development
• 🤝 Contributing
• 🩷 Sponsor
• 🔗 Links
  • More Products
  • Design Resources
  • Development Resources

📦 Installation

Important

This package is ESM only.

To install Lobe UI, run the following command:

$ pnpm add @lobehub/ui

Upgrading from 5.x? Follow the v6 migration guide and run npx @lobehub/ui-codemod@beta v6 ..

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

Import the theme stylesheet once, then wrap the app in ConfigProvider:

import '@lobehub/ui/theme.css';
import '@lobehub/ui/style.css';
// optional document resets (body font, background, scrollbars)
import '@lobehub/ui/global.css';

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

export default () => (
  <ConfigProvider motion={motion}>
    <Button>Hello AIGC</Button>
  </ConfigProvider>
);

Lobe UI CSS is emitted inside the lobe-base, lobe-popup and lobe-ui cascade layers, so unlayered CSS always wins over it. Put global resets (button { font: inherit }, normalize.css, ...) in a layer declared before them:

@layer reset, lobe-base, lobe-popup, lobe-ui;

@layer reset {
  button {
    font: inherit;
  }
}

This @layer statement must be the first CSS your app loads, before theme.css and style.css: the first declaration of a layer fixes its order and later order statements are ignored.

With Tailwind v4, use one merged statement as the very first CSS, before @import 'tailwindcss', theme.css and style.css:

@layer theme, base, lobe-base, lobe-popup, lobe-ui, components, utilities;

The lobe layers sit after Tailwind's base (preflight), so preflight loses to Lobe UI, and before components / utilities, so Tailwind utilities still beat Lobe UI.

Theming

Appearance and colors are plain attributes, read by theme.css:

<html data-theme="dark" data-primary-color="blue" data-neutral-color="slate"></html>

• setLobeTheme({ appearance, primaryColor, neutralColor }) updates them at runtime; <LobeThemeScript appearance="system" /> sets them before first paint. With next-themes, use attribute="data-theme".
• <ThemeScope appearance="dark"> themes a subtree (e.g. a dark island in a light page).
• Style with createStaticStyles / cssVar / cx from @lobehub/ui; useTheme() / useThemeMode() return the current tokens when JS needs concrete values.

I18n

Use the i18n provider with resource bundles. Component texts props always take priority.

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

ConfigProvider (Motion)

You must pass a motion component via ConfigProvider. It also loads the web fonts (enableCustomFonts, customFonts), sets direction, and hosts the portal container for popups.

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

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

If your app uses LazyMotion, pass m:

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

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

⌨️ 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
$ pnpm install
$ pnpm 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.

🔗 Links

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 Vidol - Experience the magic of virtual idol creation with Lobe Vidol, enjoy the elegance of our Exquisite UI Design, dance along using MMD Dance Support, and engage in Smooth Conversations.

Design Resources

• 🍭 Lobe UI - An open-source UI component library for building AIGC web apps.
• 🥨 Lobe Icons - Popular AI / LLM Model Brand SVG Logo and Icon Collection.
• 📊 Lobe Charts - React modern charts components built on recharts

Development Resources

• 🎤 Lobe TTS - A high-quality & reliable TTS/STT library for Server and Browser
• 🌏 Lobe i18n - Automation ai tool for the i18n (internationalization) translation process.

More Resources

---

📝 License

Copyright © 2023 LobeHub.
This project is MIT licensed.