back to home

wangdicoder / tiny-design

⚛️ A friendly UI component set for React.js

View on GitHub
235 stars
11 forks
0 issues
TypeScriptSCSSCSS

AI Architecture Analysis

This repository is indexed by RepoMind. By analyzing wangdicoder/tiny-design in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.

Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context on-demand, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.

Source files are only loaded when you start an analysis to optimize performance.

Embed this Badge

Showcase RepoMind's analysis directly in your repository's README.

[![Analyzed by RepoMind](https://img.shields.io/badge/Analyzed%20by-RepoMind-4F46E5?style=for-the-badge)](https://repomind.in/repo/wangdicoder/tiny-design)
Preview:Analyzed by RepoMind

Repository Overview (README excerpt)

Crawler view

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 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 Quick Start 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 Or set it declaratively: CSS custom properties Every visual token is a CSS custom property. Override any of them: SCSS variables For compile-time control, override SCSS variables before importing: See the Theming Guide for the full list of tokens and variables. Packages | Package | Description | | ------- | ----------- | | @tiny-design/react | Core component library | | @tiny-design/tokens | Design tokens and foundational styles | | @tiny-design/icons | SVG icon components | 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 | 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 License MIT