Any TDF

One shared design system. Three framework-native mobile component libraries.

STDF for Svelte • RTDF for React • VTDF for Vue

STDF • RTDF • VTDF

English • 简体中文 • 繁體中文 • 日本語 • 한국어 • Español • Русский • Français • Deutsch • Italiano

Any TDF is a mobile-first component system for Svelte, React, and Vue. Its three libraries share product behavior, visual language, themes, locale data, public types, documentation structure, and accessibility rules while preserving the rendering model and composition patterns of each framework.

This is not a cross-framework wrapper or a single runtime hidden behind adapters. STDF exposes Svelte components, snippets, actions, and transitions; RTDF exposes React components, props, render functions, hooks, and providers; VTDF exposes Vue components, slots, events, and composables.

• 60 aligned mobile components with framework-native APIs and predictable behavior.
• A shared Tailwind CSS theme system with dark mode, runtime switching, custom themes, and reusable semantic colors.
• More than 60 built-in locale packages plus Chinese and English guides, API references, and component examples.
• TypeScript-first package exports, SSR support, on-demand imports, and shared accessibility behavior.
• Native Svelte motion semantics with matching React and Vue motion packages.
• A unified project generator, SVG sprite and Markdown plugins, offline AI Skills, and a VS Code extension.
• Contract, package, route, browser, and visual checks that keep all three implementations aligned.

The next-generation component family is currently published on npm under the alpha tag. The two Vite plugins use the stable latest tag.

Create a TypeScript project interactively:

bun create any-tdf@alpha

Or choose the framework and starter explicitly:

bun create any-tdf@alpha my-app -f svelte -t sktt -b lucide
bun create any-tdf@alpha my-app -f react -t vrtt -b phosphor
bun create any-tdf@alpha my-app -f vue -t vrtt -b tabler

The generator provides Vite and SvelteKit templates, TypeScript, Tailwind CSS or UnoCSS, several icon strategies, built-in icon libraries, and single- or multi-theme setups. See the complete create-any-tdf reference for every option.

To add a component library to an existing application:

bun add stdf@alpha svelte tailwindcss
bun add rtdf@alpha react react-dom tailwindcss
bun add vtdf@alpha vue tailwindcss

Only install the line for your framework. Each package installs its shared Any TDF runtime dependencies automatically. Continue with the corresponding website for stylesheet imports, theme configuration, components, and migration guides.

All public npm packages maintained in this Monorepo are listed below. The live version of every package is shown in the badges at the top of this README.

The shared layer has a deliberately narrow responsibility. @any-tdf/common owns reusable state derivation, themes, locale data, SVG data, types, and small platform utilities. STDF, RTDF, and VTDF consume those contracts but render with their own framework primitives.

This separation gives consumers:

• Familiar component syntax, events, slots, children, and composition in every framework.
• Consistent component capabilities, naming, themes, locale behavior, and mobile interactions.
• Independent npm packages, documentation websites, Demos, release notes, and framework upgrades.
• No cross-framework renderer or extra compatibility runtime in application code.

Any TDF for VS Code provides hover documentation and component API completion for STDF, RTDF, and VTDF. It detects the nearest package.json, activates only the matching library, understands Svelte, JSX, TSX, and Vue files, and can show either Chinese or English API documentation.

The extension source is maintained in this Monorepo and its package and publish checks run in CI. To build a local VSIX:

bun run --filter stdf-vscode-extension package

Framework-specific Skills package component references, themes, internationalization guidance, scaffolding instructions, icon strategies, and theme-generation scripts for AI coding agents. They are maintained with the source repository and are intentionally not published to npm.

• stdf-skill
• rtdf-skill
• vtdf-skill

The repository uses Bun Workspaces, Turborepo, Changesets, and a single root lockfile. Development uses Bun and Node.js. Install dependencies only from the repository root.

bun install --frozen-lockfile
bun run check
bun run test
bun run build
bun run verify

Run the Any TDF portal, or a framework website and Demo together:

bun run dev:any-tdf
bun run dev:stdf
bun run dev:rtdf
bun run dev:vtdf

Useful repository-wide commands:

• apps: documentation websites, component Demos, and shared site code.
• packages: shared core, framework component libraries, Vite plugins, motion and confetti runtimes with package-local documentation, AI Skills, and create-any-tdf.
• content: generated STDF, RTDF, and VTDF component and guide content.
• extensions: the Any TDF VS Code extension.
• scripts: repository-wide generation, validation, packaging, and release utilities.

Use GitHub Issues for reproducible bugs and feature requests, and GitHub Discussions for questions, proposals, and implementation ideas. Contributions to components, documentation, tooling, tests, examples, and translations are welcome.

See the complete contributor graph.

Thanks to sbscan, MuGuiLin, and yuedanlabs for supporting the project.

Any TDF is released under the MIT License.

Data is updated weekly from the public GitHub and npm APIs. Trend history accumulates from the first Any TDF snapshot.