Yunti UI
☁️ Yunti UI is an open-source UI component library for building Cloud Native 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] [![][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]
Table of contents
#### TOC - [📦 Installation](#-installation) - [Compile with NextJS](#compile-with-nextjs) - [☁️ Usage](#️-usage) - [⌨️ Local Development](#️-local-development) - [🤝 Contributing](#-contributing) ####📦 Installation
[!IMPORTANT]\ This package is ESM only.
To install Yunti UI, run the following command:
pnpm add @yuntijs/uiCompile with NextJS
[!NOTE]\ By work correct with nextjs ssr, add
transpilePackages: ['@yuntijs/ui']tonext.config.js. For example:
// next.config.js
const nextConfig = {
// ...other config
transpilePackages: ['@yuntijs/ui'],
};
[![][back-to-top]](#readme-top)
☁️ Usage
[!NOTE]\ The YuntiUI components are inspired by LobeUI and 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 { ConfigProvider } from '@yuntijs/ui';
import { Logo } from 'antd';
export default () => (
<ConfigProvider>
<Logo />
</ConfigProvider>
);
[![][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/yuntijs/yunti-ui.git
cd yunti-ui
pnpm install
pnpm dev
[![][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)