# mcxue-ui

> 一套轻量级的 React UI 组件库，使用 Vite + TS + React18 开发，体积小，响应快

Latest version **0.1.0** (published 2023-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install mcxue-ui
pnpm add mcxue-ui
yarn add mcxue-ui
bun add mcxue-ui
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-04-01 |
| First published | 2023-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 96.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mcxue |
| Maintainers | eddiema |
| Keywords | react, typescript, vite, react-ui, mcxue-ui |

## Links

- npm: https://www.npmjs.com/package/mcxue-ui
- Homepage: https://github.com/mcxue/mcxue-ui
- npm.io page: https://npm.io/package/mcxue-ui

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2023-04-01
- 0.0.11 — 2023-03-26
- 0.0.10 — 2023-03-26
- 0.0.9 — 2023-03-26
- 0.0.8 — 2023-03-26
- 0.0.7 — 2023-03-26
- 0.0.6 — 2023-03-26
- 0.0.5 — 2023-03-26
- 0.0.4 — 2023-03-24
- 0.0.3 — 2023-03-24
- 0.0.2 — 2023-03-24
- 0.0.1 — 2023-03-17

## README

# Mcxue UI 组件库

一套轻量级的 React UI 组件库，使用 Vite + TS + React18 开发，体积小，响应快

目前组件还不够丰富，在慢慢开发中

文档查阅：[https://ui.mcxue.cn](https://ui.mcxue.cn)

## 安装

```
npm install mcxue-ui
yarn add mcxue-ui
```

## 引入样式文件

需要在项目的主入口处引入组件库的样式文件，比如在 `main.tsx` 中添加以下这一句

```
import 'mcxue-ui/dist/style.css'
```

## 引入组件

引入组件的方式如下所示
```
import React from 'react';
import { Button } from 'mcxue-ui';
import { Space } from 'mcxue-ui';

export default function Demo() {
  return (
    <Space>
      <Button>默认按钮</Button>
      <Button type="plain">朴素按钮</Button>
      <Button type="success">成功按钮</Button>
      <Button type="warning">警告按钮</Button>
      <Button type="error">失败按钮</Button>
      <Button type="info">信息按钮</Button>
      <Button type="link">链接按钮</Button>
      <Button type="text">文本按钮</Button>
    </Space>
  );
}
```

## 使用组件内 Icon

如果想要组件的 Icon，需要在项目的主入口处引入 iconfont.js 文件，比如在 `main.tsx` 中添加以下这两句
```
import addIconfont from 'mcxue-ui/dist/iconfont.js';

addIconfont();
```

## 缘起

平时会在个人网站上编写一些页面，发现许多地方都可以复用，因此想定制一套自己的组件库，以便在以后的开发中能够更加高效地使用这些组件

组件 API 主要参考 [Ant Design](https://ant.design/components/overview-cn/) , 详情以文档为准

---
_Source: https://npm.io/package/mcxue-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._