https://github.com/wangdicoder/tiny-design
⚛️ A friendly UI component set for React.js
https://github.com/wangdicoder/tiny-design
component-library react react-component react-components react-hook-component react-hooks react-ui-components uikit
Last synced: 1 day ago
JSON representation
⚛️ A friendly UI component set for React.js
- Host: GitHub
- URL: https://github.com/wangdicoder/tiny-design
- Owner: wangdicoder
- License: mit
- Created: 2019-03-07T12:54:14.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2026-03-29T00:01:38.000Z (8 days ago)
- Last Synced: 2026-03-29T00:47:16.368Z (8 days ago)
- Topics: component-library, react, react-component, react-components, react-hook-component, react-hooks, react-ui-components, uikit
- Language: TypeScript
- Homepage: https://wangdicoder.github.io/tiny-design/
- Size: 22.4 MB
- Stars: 235
- Watchers: 1
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Tiny Design
A friendly, themeable UI component library for React
Documentation •
Theme Editor •
Theming Guide
---
## Highlights
- **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 `useTheme` hook
- **TypeScript** — written in strict TypeScript with complete type definitions
- **Accessible** — follows [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) standards with keyboard navigation support
- **Lightweight** — tree-shakeable ESM/CJS builds; styles auto-import alongside components
- **i18n** — English and Chinese built in
- **AI-ready** — `llms.txt`, `.cursorrules`, and MCP server for seamless AI-assisted development
## Quick Start
```bash
pnpm add @tiny-design/react
```
```jsx
import { Button, Switch } from '@tiny-design/react';
const App = () => (
<>
Click Me
>
);
```
No separate CSS import needed — styles are bundled with each component and tree-shaken by modern bundlers.
## Theming
### Visual Theme Editor
The built-in [Theme Editor](https://wangdicoder.github.io/tiny-design/theme/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.
### Dark mode
```jsx
import { useTheme } from '@tiny-design/react';
function ThemeToggle() {
const { resolvedTheme, toggle } = useTheme();
return {resolvedTheme};
}
```
Or set it declaratively:
```html
```
### CSS custom properties
Every visual token is a `--ty-*` CSS custom property. Override any of them:
```css
:root {
--ty-color-primary: #3b82f6;
--ty-color-bg: #fafafa;
--ty-border-radius: 8px;
}
```
### SCSS variables
For compile-time control, override `!default` SCSS variables before importing:
```scss
$primary-color: #3b82f6;
$border-radius: 8px;
@use "@tiny-design/react/es/style/index" as *;
```
See the [Theming Guide](https://wangdicoder.github.io/tiny-design/theme/customise-theme) for the full list of tokens and variables.
## Packages
| Package | Description |
| ------- | ----------- |
| [@tiny-design/react](./packages/react) | Core component library |
| [@tiny-design/tokens](./packages/tokens) | Design tokens and foundational styles |
| [@tiny-design/icons](./packages/icons) | SVG icon components |
| [@tiny-design/cli](./packages/cli) | CLI for the Tiny Design component library |
| [@tiny-design/mcp](./packages/mcp) | MCP server for AI assistants to access the component library |
## 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 |
## Internationalization
```jsx
import { ConfigProvider, zh_CN } from '@tiny-design/react';
```
| Locale | Language |
| ------ | -------- |
| en_US | English (default) |
| zh_CN | 简体中文 |
## Browser Support
| 
Edge | 
Firefox | 
Chrome | 
Safari |
| --- | --- | --- | --- |
| last 2 versions | last 2 versions | last 2 versions | last 2 versions |
## Contributing
```bash
pnpm install # install dependencies
pnpm dev # start docs dev server
pnpm build # build all packages
pnpm test # run tests
pnpm lint # lint code
```
## License
[MIT](https://github.com/wangdicoder/tiny-design/blob/master/LICENSE)