SVELTE · REACT · VUE · TAILWIND CSS

Any TDF

一个共享产品语言、面向三种框架原生实现的移动 Web 组件系统。

共享行为契约，不共享框架限制。

YOUR APP 你的应用 业务界面，框架由你决定

FRAMEWORK LAYER 框架层 STDF · RTDF · VTDF 原生实现

SHARED CORE 共享层 @any-tdf/common · 状态 · 主题 · 类型 · 内置图标

@any-tdf/common npm statethemetypesicons

STDF Svelte

RTDF React

VTDF Vue

YOUR APP

SCROLL ↓

PRODUCT FAMILY

同一套设计语言，三种原生实现

每个组件库都基于 Tailwind CSS，并遵循一致的组件能力、主题语义和文档结构，同时保留对应框架最自然的开发方式。

SVELTE

STDF

S: Simple简单
T: Tiny轻量
D: Design设计
F: Fast快速

面向 Svelte 的移动 Web 组件库，保持简洁的组件语法与轻量运行时体验。

框架: Svelte
样式基础: Tailwind CSS
npm 包: stdf

打开官网 npm

REACT

RTDF

R: Ready即用
T: Tiny轻量
D: Design设计
F: Fast快速

面向 React 的移动 Web 组件库，以组件与 Hook 适配共享交互契约。

框架: React
样式基础: Tailwind CSS
npm 包: rtdf

打开官网 npm

VUE

VTDF

V: Visual视觉
T: Tiny轻量
D: Design设计
F: Fast快速

面向 Vue 的移动 Web 组件库，以组件和组合式函数提供原生 Vue 体验。

框架: Vue
样式基础: Tailwind CSS
npm 包: vtdf

打开官网 npm

ARCHITECTURE

共享产品逻辑，保留框架原生渲染

Any TDF 共享状态推导、主题、语言、内置图标与公共类型，但不把 Svelte、React、Vue 强行合并为同一套渲染源码。

DEPENDENCY FLOW / TOP TO BOTTOM 依赖方向保持单向

共享层

@any-tdf/common 组件状态 · 主题语义 · 语言与类型 · 内置图标

适配层

stdfSvelte 组件、事件与插槽

rtdfReact 组件、Props 与 Hook

vtdfVue 组件、事件与插槽

体验层

独立 npm 包独立官网框架 Demo 共享工具链

动效兼容

Svelte 原生，React 与 Vue 对齐

Svelte 直接使用框架内置的 easing、transition、animate 与 motion 能力；为了让另外两端保持一致的动效语义，Any TDF 分别实现了 React 和 Vue 版本。

REACT @any-tdf/react-motion 对齐 Svelte API 的动效函数、React 组件与 Hook。 VUE @any-tdf/vue-motion 对齐 Svelte API 的动效函数、Vue 组件与组合式函数。

DESIGN PRINCIPLES

统一但不抹平差异

架构围绕可维护的共享边界设计，让三端保持一致，也让每个框架仍然像它自己。

P / 01

框架原生

组件、事件、插槽和类型都遵循各自框架的习惯，不引入额外跨框架运行时。

P / 02

体验一致

组件范围、主题语义、文档结构和移动交互在三端保持可预测的一致性。

P / 03

Tailwind CSS 基础

三套组件库都基于 Tailwind CSS，共享清晰的主题变量和可组合样式语言。

P / 04

独立交付

每个组件库都可以单独安装、构建和使用，消费者不需要了解 Monorepo。

ECOSYSTEM DIRECTORY

组件之外，还有完整的开发工具链

除核心组件库与 Motion 实现外，Any TDF 还提供共享能力、脚手架、构建插件、视觉效果、AI Skill 与编辑器支持。

REGISTRY

npm 包

NPM · CORE

@any-tdf/common

跨框架共享工具、主题、语言包、类型，以及由组件状态派生的公共能力。

npm npmjs.com

NPM · CLI

create-any-tdf

用于创建 STDF、RTDF 与 VTDF TypeScript 项目的命令行脚手架。

npm npmjs.com

NPM · VITE

@any-tdf/vite-plugin-md-ts

把 Markdown 文件转换为 JavaScript 模块的 Vite 与 Rollup 插件。

npm npmjs.com

NPM · VITE

@any-tdf/vite-plugin-svg-symbol

把多个 SVG 文件合并为 symbol sprite 的 Vite 与 Rollup 插件。

npm npmjs.com

NPM · REACT

@any-tdf/react-confetti

面向 React 的纯 HTML 与 CSS 彩纸动画，保持 svelte-confetti 的轻量实现和 SSR 兼容。

官网 react-confetti.any-tdf.dev

NPM · VUE

@any-tdf/vue-confetti

面向 Vue 的纯 HTML 与 CSS 彩纸动画，保持 svelte-confetti 的轻量实现和 SSR 兼容。

官网 vue-confetti.any-tdf.dev

AI CONTEXT

AI Skill

SKILL · SVELTE

$stdf

面向 AI 代理的 STDF 离线资料，覆盖组件、主题、色彩、国际化、脚手架与图标方案。

源码 github.com/any-tdf

SKILL · REACT

$rtdf

面向 AI 代理的 RTDF 离线资料，覆盖组件、主题、色彩、国际化、脚手架与图标方案。

源码 github.com/any-tdf

SKILL · VUE

$vtdf

面向 AI 代理的 VTDF 离线资料，覆盖组件、主题、色彩、国际化、脚手架与图标方案。

源码 github.com/any-tdf

EDITOR

VS Code 插件

VS CODE · EXTENSION

Any TDF for VS Code

为 STDF、RTDF 与 VTDF 提供组件 API 悬停文档、版本信息和框架原生代码补全。

VS Code Marketplace marketplace.visualstudio.com

START BUILDING

从你熟悉的框架开始

访问对应官网，查看指南、组件、主题生成器和在线 Demo。

STDFSvelte RTDFReact VTDFVue

COMMUNITY

由社区共同建设

感谢每一位贡献者和赞助者，让 Any TDF 保持开放并持续演进。

CONTRIBUTORS

贡献者

查看全部贡献者

每一次提交、反馈和改进，都在推动整个跨框架生态向前发展。

赞助者

感谢这些朋友通过赞助支持长期维护、文档建设与生态扩展。

OPEN SOURCE PULSE

用公开数据，记录项目成长

LIVE / DAILY SNAPSHOT 持续采集中

GITHUB — Stars

GITHUB — Forks

STDF · RTDF · VTDF — 核心包近 7 天下载

npm ECOSYSTEM — 生态包近 7 天下载

STAR GROWTH

Star 增长趋势

—

PACKAGE ACTIVITY

npm 包活跃度

— 个公开包

统计周期 —