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';

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

Styles are automatically imported alongside each component — no separate CSS import needed. Modern bundlers (webpack, Vite, Rollup) will tree-shake unused components and their styles.

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