KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

any-tdf

★ 774 Open GitHub ↗

Mobile web component library based on Svelte/React/Vue and Tailwind

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![CI](https://github.com/any-tdf/any-tdf/actions/workflows/ci.yml/badge.svg)](https://github.com/any-tdf/any-tdf/actions/workflows/ci.yml)
[![npm Publish](https://github.com/any-tdf/any-tdf/actions/workflows/publish-npm.yml/badge.svg)](https://github.com/any-tdf/any-tdf/actions/workflows/publish-npm.yml)
[![VS Code Publish](https://github.com/any-tdf/any-tdf/actions/workflows/publish-vscode.yml/badge.svg)](https://github.com/any-tdf/any-tdf/actions/workflows/publish-vscode.yml)
[![Release](https://github.com/any-tdf/any-tdf/actions/workflows/release.yml/badge.svg)](https://github.com/any-tdf/any-tdf/actions/workflows/release.yml)

# Any TDF

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

**STDF for Svelte • RTDF for React • VTDF for Vue**

![Svelte](https://img.shields.io/badge/Svelte-FF3E00?logo=svelte&logoColor=fff)
![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=16181d)
![Vue](https://img.shields.io/badge/Vue-42B883?logo=vuedotjs&logoColor=fff)
![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-00BCFF?logo=tailwindcss&logoColor=fff)
![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff)
![Bun](https://img.shields.io/badge/Bun-000?logo=bun&logoColor=fff)

[![VS Code extension](https://img.shields.io/badge/VS_Code-Extension-c7f292?logo=visualstudiocode&logoColor=F0FCD6&labelColor=0E1901&style=flat-square)](https://raw.githubusercontent.com/any-tdf/any-tdf/main/extensions/vscode-extension)
[![GitHub stars](https://img.shields.io/github/stars/any-tdf/any-tdf?logo=github&label=stars&style=flat-square&color=A1DAD7&logoColor=D9F8F2&labelColor=011918)](https://github.com/any-tdf/any-tdf)
[![GitHub license](https://img.shields.io/github/license/any-tdf/any-tdf?logo=github&style=flat-square&color=B9C46A&logoColor=F3F3CB&labelColor=161901)](https://github.com/any-tdf/any-tdf/blob/main/LICENSE)

[STDF](https://stdf.dev) • [RTDF](https://rtdf.dev) • [VTDF](https://vtdf.dev)

[English](./README.md) • [简体中文](./readme/README_zh_CN.md) • [繁體中文](./readme/README_zh_TW.md) • [日本語](./readme/README_ja_JP.md) • [한국어](./readme/README_ko_KR.md) • [Español](./readme/README_es_ES.md) • [Русский](./readme/README_ru_RU.md) • [Français](./readme/README_fr_FR.md) • [Deutsch](./readme/README_de_DE.md) • [Italiano](./readme/README_it_IT.md)

</div>

## 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 and Demo       |
| ------- | ---------------- | -------------------------------------------- | ---------------------------- |
| STDF    | Svelte           | [`stdf`](https://www.npmjs.com/package/stdf) | [stdf.dev](https://stdf.dev) |
| RTDF    | React            | [`rtdf`](https://www.npmjs.com/package/rtdf) | [rtdf.dev](https://rtdf.dev) |
| VTDF    | Vue              | [`vtdf`](https://www.npmjs.com/package/vtdf) | [vtdf.dev](https://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

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

```sh
bun create any-tdf@alpha
```

Or choose the framework and starter explicitly:

```sh
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](./packages/create-any-tdf/README.md) for every option.

To add a component library to an existing application:

```sh
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.

## 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`](https://www.npmjs.com/package/@any-tdf/common)                                 | Framework-neutral component state, themes, locales, SVG data, and types. | [README](./packages/common/README.md)                 |
| Component library | [`stdf`](https://www.npmjs.com/package/stdf)                                                       | The Svelte implementation of the Any TDF component system.               | [stdf.dev](https://stdf.dev)                          |
| Component library | [`rtdf`](https://www.npmjs.com/package/rtdf)                                                       | The React implementation of the Any TDF component system.                | [rtdf.dev](https://rtdf.dev)                          |
| Component library | [`vtdf`](https://www.npmjs.com/package/vtdf)                                                       | The Vue implementation of the Any TDF component system.                  | [vtdf.dev](https://vtdf.dev)                          |
| Scaffolding       | [`create-any-tdf`](https://www.npmjs.com/package/create-any-tdf)                                   | Framework-native TypeScript project templates and setup choices.         | [README](./packages/create-any-tdf/README.md)         |
| Build tooling     | [`@any-tdf/vite-plugin-svg-symbol`](https://www.npmjs.com/package/@any-tdf/vite-plugin-svg-symbol) | Combines SVG folders into reusable symbol sprites for Vite and Rollup.   | [README](./packages/vite-plugin-svg-symbol/README.md) |
| Build tooling     | [`@any-tdf/vite-plugin-md-ts`](https://www.npmjs.com/package/@any-tdf/vite-plugin-md-ts)           | Imports Markdown as source text or generated HTML in Vite and Rollup.    | [README](./packages/vite-plugin-md-ts/README.md)      |
| Motion            | [`@any-tdf/react-motion`](https://www.npmjs.com/package/@any-tdf/react-motion)                     | Svelte-aligned easing, transition, animation, and motion APIs for React. | [Demo](https://react-motion.any-tdf.dev)              |
| Motion            | [`@any-tdf/vue-motion`](https://www.npmjs.com/package/@any-tdf/vue-motion)                         | Svelte-aligned easing, transition, animation, and motion APIs for Vue.   | [Demo](https://vue-motion.any-tdf.dev)                |
| Confetti          | [`@any-tdf/react-confetti`](https://www.npmjs.com/package/@any-tdf/react-confetti)                 | An SSR-friendly React port of the pure HTML and CSS confetti effect.     | [Demo](https://react-confetti.any-tdf.dev)            |
| Confetti          | [`@any-tdf/vue-confetti`](https://www.npmjs.com/package/@any-tdf/vue-confetti)                     | An SSR-friendly Vue port of the pure HTML and CSS confetti effect.       | [Demo](https://vue-confetti.any-tdf.dev)              |

## 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](./extensions/vscode-extension/README.md) 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:

```sh
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`](./packages/skills/stdf-skill/README.md)
- [`rtdf-skill`](./packages/skills/rtdf-skill/README.md)
- [`vtdf-skill`](./packages/skills/vtdf-skill/README.md)

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

```sh
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:

```sh
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](https://github.com/any-tdf/any-tdf/issues) for reproducible bugs and feature requests, and [GitHub Discussions](https://github.com/any-tdf/any-tdf/discussions) for questions, proposals, and implementation ideas. Contributions to components, documentation, tooling, tests, examples, and translations are welcome.

See the complete [contributor graph](https://github.com/any-tdf/any-tdf/graphs/contributors).

## Sponsors

Thanks to [sbscan](https://github.com/sbscan), [MuGuiLin](https://github.com/MuGuiLin), and [yuedanlabs](https://github.com/yuedanlabs) for supporting the project.

## License

Any TDF is released under the [MIT License](https://github.com/any-tdf/any-tdf/blob/main/LICENSE).

## Project statistics

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

any-tdf

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README