A friendly, themeable UI component library for React
Documentation • Theme Editor • Theming Guide
- 80+ components — buttons, forms, data display, navigation, feedback, and more
- Visual Theme Editor — 20+ built-in presets inspired by popular design systems; customise colours, typography, and spacing in real time without writing code
- Dark mode — built-in light/dark themes with system preference detection and a
useThemehook - TypeScript — written in strict TypeScript with complete type definitions
- Accessible — follows WAI-ARIA standards with keyboard navigation support
- Lightweight — tree-shakeable ESM/CJS builds; styles auto-import alongside components
- i18n — English and Chinese built in
pnpm add @tiny-design/reactimport { Button, Switch } from '@tiny-design/react';
const App = () => (
<>
<Button btnType="primary">Click Me</Button>
<Switch checked />
</>
);No separate CSS import needed — styles are bundled with each component and tree-shaken by modern bundlers.
The built-in Theme Editor lets you pick from 20+ preset themes or fine-tune individual tokens — colours, typography, border radius, spacing — and see changes live on real components. Export as CSS or SCSS when you're done.
import { useTheme } from '@tiny-design/react';
function ThemeToggle() {
const { resolvedTheme, toggle } = useTheme();
return <button onClick={toggle}>{resolvedTheme}</button>;
}Or set it declaratively:
<html data-tiny-theme="dark">Every visual token is a --ty-* CSS custom property. Override any of them:
:root {
--ty-color-primary: #3b82f6;
--ty-color-bg: #fafafa;
--ty-border-radius: 8px;
}For compile-time control, override !default SCSS variables before importing:
$primary-color: #3b82f6;
$border-radius: 8px;
@use "@tiny-design/react/es/style/index" as *;See the Theming Guide for the full list of tokens and variables.
| Package | Description |
|---|---|
| @tiny-design/react | Core component library |
| @tiny-design/tokens | Design tokens and foundational styles |
| @tiny-design/icons | SVG icon components |
| Category | Count | Examples |
|---|---|---|
| Foundation | 5 | Button, Icon, Image, Link, Typography |
| Layout | 7 | Grid, Flex, Space, Split, Divider, Aspect Ratio |
| Navigation | 7 | Menu, Breadcrumb, Dropdown, Pagination, Steps, Anchor, SpeedDial |
| Data Display | 19 | Card, Carousel, Collapse, Tag, Tooltip, Tree, Table |
| Form | 22 | Input, Select, DatePicker, TimePicker, Checkbox, Radio, Slider |
| Feedback | 13 | Modal, Drawer, Overlay, Message, Notification, Alert, Skeleton |
| Miscellany | 5 | ConfigProvider, BackTop, Sticky, Keyboard, CopyToClipboard |
import { ConfigProvider, zh_CN } from '@tiny-design/react';
<ConfigProvider locale={zh_CN}>
<App />
</ConfigProvider>| Locale | Language |
|---|---|
| en_US | English (default) |
| zh_CN | 简体中文 |
 Edge |
 Firefox |
 Chrome |
 Safari |
|---|---|---|---|
| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
pnpm install # install dependencies
pnpm dev # start docs dev server
pnpm build # build all packages
pnpm test # run tests
pnpm lint # lint code