Introduction

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.

Product family

Library	Native framework	npm package	Documentation	Demo
STDF	Svelte	stdf	stdf.dev	demo.stdf.dev
RTDF	React	rtdf	rtdf.dev	demo.rtdf.dev
VTDF	Vue	vtdf	vtdf.dev	demo.vtdf.dev

Why Any TDF

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

Quick start

Create a TypeScript project interactively:

bun create any-tdf

Or choose the framework and starter explicitly:

bun create any-tdf my-app -f svelte -t sktt -b lucide
bun create any-tdf my-app -f react -t vrtt -b phosphor
bun create any-tdf 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 svelte tailwindcss
bun add rtdf react react-dom tailwindcss
bun add vtdf 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.

Package ecosystem

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.

Area	Package	Purpose	Documentation
Shared foundation	@any-tdf/common	Framework-neutral component state, themes, locales, SVG data, and types.	README
Component library	stdf	The Svelte implementation of the Any TDF component system.	stdf.dev
Component library	rtdf	The React implementation of the Any TDF component system.	rtdf.dev
Component library	vtdf	The Vue implementation of the Any TDF component system.	vtdf.dev
Scaffolding	create-any-tdf	Framework-native TypeScript project templates and setup choices.	README
Build tooling	@any-tdf/vite-plugin-svg-symbol	Combines SVG folders into reusable symbol sprites for Vite and Rollup.	README
Build tooling	@any-tdf/vite-plugin-md-ts	Imports Markdown as source text or generated HTML in Vite and Rollup.	README
Motion	@any-tdf/react-motion	Svelte-aligned easing, transition, animation, and motion APIs for React.	Demo
Motion	@any-tdf/vue-motion	Svelte-aligned easing, transition, animation, and motion APIs for Vue.	Demo
Confetti	@any-tdf/react-confetti	An SSR-friendly React port of the pure HTML and CSS confetti effect.	Demo
Confetti	@any-tdf/vue-confetti	An SSR-friendly Vue port of the pure HTML and CSS confetti effect.	Demo

Shared architecture, native rendering

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.

VS Code extension

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

Offline AI Skills

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

Monorepo development

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:

Command	Purpose
bun run generate	Regenerate framework, documentation, version, and extension data.
bun run generate:check	Confirm generated files match their sources.
bun run quality:check	Build, format-check, and lint the Monorepo.
bun run verify:browser	Exercise Demo and documentation interactions in a real browser.
bun run changeset	Describe a package change for the next release.

Repository structure

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

Contributing and feedback

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.

Sponsors

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

License

Any TDF is released under the MIT License.

Project statistics

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