LobeHub UI Kit
Lobe UI is an open-source UI component library for building AIGC web apps.
Built for AI interfaces
90+ components — every tile below is a live render, not a screenshot.
Streaming Markdown
Renders GFM, math, mermaid and code out of the box:
- Tables, task lists, footnotes
- KaTeX math and Mermaid charts
- Streaming-friendly rendering
Built for AI conversation content.
pnpm add @lobehub/uiconst { message } = await client.chat({
model: 'claude-fable-5',
stream: true,
})
Code you write, UI you get
Switch tabs — each snippet on the left renders live on the right.
import { Markdown } from '@lobehub/ui'
export default () => (
<Markdown variant={'chat'}>
{`## Hello
Streaming **markdown**…`}
</Markdown>
)Hello
Streaming markdown with inline code:
- GFM tables and lists
- KaTeX math, Mermaid charts
Everything an AIGC app needs
Design foundations that hold up beyond the demo.
Themeable
Customize colors, typography, breakpoints, and other design foundations through the theme system.
Fast
Avoid unnecessary style-prop processing at runtime while retaining a flexible component API.
Light and dark UI
Build interfaces that adapt consistently to light and dark appearance preferences.
i18n ready
Ship in 18 locales out of the box with I18nProvider, including RTL-aware layouts.
MDX and docs
Render content-heavy pages with the bundled MDX components and typography styles.
AIGC icons
Includes an AIGC-flavored icon set covering models, providers, and chat affordances.