Skip to content

Commit 603520b

Browse files
wangdicoderwangdicoder
committed
docs: rewrite README with comprehensive project overview
Add features list, component categories table, on-demand loading instructions, theming/dark mode section, and updated browser support (drop IE). Consolidate badges and add links section.
1 parent e2658ca commit 603520b

1 file changed

Lines changed: 92 additions & 42 deletions

File tree

‎README.md‎

Lines changed: 92 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,146 @@
11
<p align="center">
2-
<a href="http://tiny-ui.org">
2+
<a href="https://tiny-ui.dev">
33
<img width="200" src="https://github.com/wangdicoder/tiny-ui/blob/master/site/src/assets/logo/logo.svg">
44
</a>
55
</p>
66

77
<h1 align="center">Tiny UI</h1>
8-
<p align="center">A Friendly UI Component Set for React</p>
8+
<p align="center">A friendly UI component set for React</p>
99

1010
<p align="center">
11-
<a href="https://www.npmjs.com/package/tiny-ui" target="_blank">
12-
<img src="https://img.shields.io/npm/v/tiny-ui.svg?style=flat-square"/>
11+
<a href="https://www.npmjs.com/package/tiny-ui">
12+
<img src="https://img.shields.io/npm/v/tiny-ui.svg?style=flat-square" alt="npm version"/>
1313
</a>
14-
<a href="https://www.npmjs.com/package/tiny-ui" target="_blank">
15-
<img src="https://img.shields.io/npm/dm/tiny-ui.svg?style=flat-square">
14+
<a href="https://www.npmjs.com/package/tiny-ui">
15+
<img src="https://img.shields.io/npm/dm/tiny-ui.svg?style=flat-square" alt="npm downloads"/>
1616
</a>
17-
<a href="https://bundlephobia.com/package/tiny-ui" target="_blank">
18-
<img src="https://img.shields.io/bundlephobia/minzip/tiny-ui.svg?style=flat-square">
17+
<a href="https://bundlephobia.com/package/tiny-ui">
18+
<img src="https://img.shields.io/bundlephobia/minzip/tiny-ui.svg?style=flat-square" alt="bundle size"/>
1919
</a>
20-
<br>
21-
<a href="https://react.dev" target="_blank">
22-
<img src="https://img.shields.io/static/v1?label=react&message=%3E=18&color=61dafb&style=flat-square">
20+
<a href="https://react.dev">
21+
<img src="https://img.shields.io/static/v1?label=react&message=%3E=18&color=61dafb&style=flat-square" alt="react version"/>
2322
</a>
24-
<a href="https://github.com/wangdicoder/tiny-ui/issues" target="_blank">
25-
<img src="https://img.shields.io/github/issues/wangdicoder/tiny-ui.svg?style=flat-square">
26-
</a>
27-
<a href="https://github.com/wangdicoder/tiny-ui/blob/master/LICENSE" target="_blank">
28-
<img src="https://img.shields.io/npm/l/tiny-ui.svg?style=flat-square">
23+
<a href="https://github.com/wangdicoder/tiny-ui/blob/master/LICENSE">
24+
<img src="https://img.shields.io/npm/l/tiny-ui.svg?style=flat-square" alt="license"/>
2925
</a>
3026
</p>
3127

28+
---
3229

33-
## 📦 Install
30+
## Features
3431

35-
Use npm
32+
- 65+ high-quality React components
33+
- Written in **TypeScript** with complete type definitions
34+
- Entirely built with function components and **React Hooks**
35+
- **Dark mode** support with system preference detection
36+
- **i18n** built-in — English and Chinese out of the box
37+
- Follows [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) accessibility standards
38+
- Customisable themes via SCSS variables
39+
- Supports tree-shaking for minimal bundle size
3640

37-
```bash
38-
npm install tiny-ui --save
39-
```
41+
## Component Categories
4042

41-
Use yarn
43+
| Category | Components | Examples |
44+
| -------- | :--------: | -------- |
45+
| Foundation | 5 | Button, Icon, Image, Link, Typography |
46+
| Layout | 6 | Grid, Space, Split, Divider, Aspect Ratio |
47+
| Navigation | 5 | Menu, Breadcrumb, Dropdown, Pagination, Steps |
48+
| Data Display | 15 | Card, Carousel, Collapse, Tag, Tooltip, Tree |
49+
| Form | 17 | Input, Select, DatePicker, TimePicker, Checkbox, Radio, Slider |
50+
| Feedback | 12 | Modal, Drawer, Message, Notification, Alert, Skeleton |
51+
| Miscellany | 5 | ConfigProvider, BackTop, Sticky, Keyboard |
52+
53+
## Install
4254

4355
```bash
56+
# npm
57+
npm install tiny-ui
58+
59+
# yarn
4460
yarn add tiny-ui
4561
```
4662

47-
## 🔨 Quick Start
63+
## Quick Start
4864

49-
```js
65+
```jsx
5066
import { Button, Switch } from 'tiny-ui';
67+
import 'tiny-ui/dist/styles/index.css';
5168

5269
const App = () => (
5370
<>
5471
<Button btnType="primary">Click Me</Button>
55-
<Switch checked/>
72+
<Switch checked />
5673
</>
5774
);
5875
```
5976

60-
And import style manually:
77+
### On-demand loading
6178

62-
```js
63-
import 'tiny-ui/dist/styles/index.css';
79+
Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) to load components and styles on demand:
80+
81+
```json
82+
{
83+
"plugins": [
84+
["import", { "libraryName": "tiny-ui", "style": "css" }]
85+
]
86+
}
6487
```
6588

66-
## 🌍 Internationalization
89+
## Theming
6790

68-
Built-in support for English and Chinese. Set locale via `ConfigProvider` or `IntlProvider`:
91+
### Dark mode
92+
93+
```jsx
94+
import { ConfigProvider } from 'tiny-ui';
95+
96+
<ConfigProvider theme="dark">
97+
<App />
98+
</ConfigProvider>
99+
```
100+
101+
### Custom themes
102+
103+
Override SCSS variables to customise colours, borders, fonts, and more:
104+
105+
```scss
106+
$primary-color: #007bff;
107+
$font-path: '~tiny-ui/themes/fonts';
108+
@import '~tiny-ui/themes/index.scss';
109+
```
110+
111+
See the [Theme Customisation Guide](https://tiny-ui.dev/guide/customise-theme) for details.
112+
113+
## Internationalization
114+
115+
Built-in locale support for English and Chinese. Set locale via `ConfigProvider` or `IntlProvider`:
69116

70117
```jsx
71118
import { ConfigProvider, zh_CN } from 'tiny-ui';
72119

73-
const App = () => (
74-
<ConfigProvider locale={zh_CN}>
75-
<MyApp />
76-
</ConfigProvider>
77-
);
120+
<ConfigProvider locale={zh_CN}>
121+
<App />
122+
</ConfigProvider>
78123
```
79124

80125
| Locale | Language |
81126
| ------ | -------- |
82127
| en_US | English (default) |
83128
| zh_CN | 简体中文 |
84129

85-
## 🖥 Browser Support
130+
## Browser Support
131+
132+
Supports all modern browsers. IE is **not** supported.
86133

87-
Supports all major modern browsers.
134+
| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" /><br>Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /><br>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /><br>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /><br>Safari |
135+
| --- | --- | --- | --- |
136+
| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
88137

89-
| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" /></br>IE | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" /></br>Edge | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" /></br>Firefox | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" /> </br>Chrome | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" /></br>Safari |
90-
| ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
91-
| >=11 | >= 14 | last 2 versions | last 2 versions | last 2 versions |
138+
## Links
92139

140+
- [Documentation](https://tiny-ui.dev)
141+
- [Changelog](https://github.com/wangdicoder/tiny-ui/blob/master/CHANGELOG.md)
142+
- [Issues](https://github.com/wangdicoder/tiny-ui/issues)
93143

94-
## 🔗 Links
144+
## License
95145

96-
- [Home page](https://tiny-ui.dev)
146+
[MIT](https://github.com/wangdicoder/tiny-ui/blob/master/LICENSE)

0 commit comments

Comments
 (0)