lobehub / lobe-ui

🍭 Lobe UI - an open-source UI component library for building AIGC web apps
https://ui.lobehub.com
MIT License
799 stars 115 forks source link
aigc antd chatbot design-system dumi lobehub react typescript ui ui-components ui-kit

Lobe UI

Lobe UI is an open-source UI component library for building _AIGC_ web apps English ・ [简体中文](./README.zh-CN.md) ・ [Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link] [![][npm-release-shield]][npm-release-link] [![][vercel-shield]][vercel-link] [![][discord-shield]][discord-link] [![][npm-downloads-shield]][npm-downloads-link] [![][github-releasedate-shield]][github-releasedate-link] [![][github-action-test-shield]][github-action-test-link] [![][github-action-release-shield]][github-action-release-link]
[![][github-contributors-shield]][github-contributors-link] [![][github-forks-shield]][github-forks-link] [![][github-stars-shield]][github-stars-link] [![][github-issues-shield]][github-issues-link] [![][github-license-shield]][github-license-link] [![][banner]][vercel-link]
Table of contents #### TOC - [📦 Installation](#-installation) - [Compile with NextJS](#compile-with-nextjs) - [🤯 Usage](#-usage) - [⌨️ Local Development](#️-local-development) - [🤝 Contributing](#-contributing) - [🔗 More Products](#-more-products) ####

📦 Installation

[!IMPORTANT]\ This package is ESM only.

To install Lobe UI, run the following command:

$ bun add @lobehub/ui

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'],
};
[![][back-to-top]](#readme-top)

🤯 Usage

[!NOTE]\ The LobeUI components are developed based on Antd, fully compatible with Antd components, and it is recommended to use antd-style as the default css-in-js styling solution.

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

export default () => (
  <ThemeProvider>
    <Button>Hello AIGC</Button>
  </ThemeProvider>
)
[![][back-to-top]](#readme-top)

⌨️ 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
$ bun install
$ bun start
[![][back-to-top]](#readme-top)

🤝 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.

[![][back-to-top]](#readme-top)

🩷 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.

[![][back-to-top]](#readme-top)

🔗 More Products

[![][back-to-top]](#readme-top)

📝 License

[![][fossa-license-shield]][fossa-license-link]

Copyright © 2023 LobeHub.
This project is MIT licensed.