README.md

April 19, 2026 · View on GitHub

Tiny Design

A friendly, themeable UI component library for React

test status npm version npm downloads minzipped size jsDelivr hits react version license

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

pnpm add @tiny-design/react

import { Button, Switch } from '@tiny-design/react';

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

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

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">

CSS custom properties

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

See the Theming Guide for the full token list and Theme Studio workflow.

Packages

PackageDescription
@tiny-design/reactCore component library
@tiny-design/tokensV2 design tokens and theme runtime
@tiny-design/iconsSVG icon components
@tiny-design/cliCLI for the Tiny Design component library
@tiny-design/mcpMCP server for AI assistants to access the component library

Components

CategoryCountExamples
Foundation5Button, Icon, Image, Link, Typography
Layout7Grid, Flex, Space, Split, Divider, Aspect Ratio
Navigation7Menu, Breadcrumb, Dropdown, Pagination, Steps, Anchor, SpeedDial
Data Display19Card, Carousel, Collapse, Tag, Tooltip, Tree, Table
Form22Input, Select, DatePicker, TimePicker, Checkbox, Radio, Slider
Feedback13Modal, Drawer, Overlay, Message, Notification, Alert, Skeleton
Miscellany5ConfigProvider, BackTop, Sticky, Keyboard, CopyToClipboard

Internationalization

import { ConfigProvider, zh_CN } from '@tiny-design/react';

<ConfigProvider locale={zh_CN}>
  <App />
</ConfigProvider>
LocaleLanguage
en_USEnglish (default)
zh_CN简体中文

Browser Support

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

Contributing

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