Tiny UI

A friendly UI component set for React

---

Features

• 65+ high-quality React components
• Written in TypeScript with complete type definitions
• Entirely built with function components and React Hooks
• Dark mode support with system preference detection
• i18n built-in — English and Chinese out of the box
• Follows WAI-ARIA accessibility standards
• Customisable themes via SCSS variables
• Supports tree-shaking for minimal bundle size

Component Categories

Category	Components	Examples
Foundation	5	Button, Icon, Image, Link, Typography
Layout	6	Grid, Space, Split, Divider, Aspect Ratio
Navigation	5	Menu, Breadcrumb, Dropdown, Pagination, Steps
Data Display	15	Card, Carousel, Collapse, Tag, Tooltip, Tree
Form	17	Input, Select, DatePicker, TimePicker, Checkbox, Radio, Slider
Feedback	12	Modal, Drawer, Message, Notification, Alert, Skeleton
Miscellany	5	ConfigProvider, BackTop, Sticky, Keyboard

Install

# npm
npm install tiny-ui

# yarn
yarn add tiny-ui

Quick Start

import { Button, Switch } from 'tiny-ui';
import 'tiny-ui/dist/styles/index.css';

const App = () => (
  <>
    <Button btnType="primary">Click Me</Button>
    <Switch checked />
  </>
);

On-demand loading

Use babel-plugin-import to load components and styles on demand:

{
  "plugins": [
    ["import", { "libraryName": "tiny-ui", "style": "css" }]
  ]
}

Theming

Dark mode

import { ConfigProvider } from 'tiny-ui';

<ConfigProvider theme="dark">
  <App />
</ConfigProvider>

Custom themes

Override SCSS variables to customise colours, borders, fonts, and more:

$primary-color: #007bff;
$font-path: '~tiny-ui/themes/fonts';
@import '~tiny-ui/themes/index.scss';

See the Theme Customisation Guide for details.

Internationalization

Built-in locale support for English and Chinese. Set locale via ConfigProvider or IntlProvider:

import { ConfigProvider, zh_CN } from 'tiny-ui';

<ConfigProvider locale={zh_CN}>
  <App />
</ConfigProvider>

Locale	Language
en_US	English (default)
zh_CN	简体中文

Browser Support

Supports all modern browsers. IE is not supported.

Edge	Firefox	Chrome	Safari
last 2 versions	last 2 versions	last 2 versions	last 2 versions

Links

• Documentation
• Changelog
• Issues

License

MIT