RTDF

Website | Demo

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

Introduction

Mobile web component library based on React, Tailwind CSS, and the any-tdf design system.

Ready | Tiny | Design | Fast

RTDF follows the STDF component design and API shape as closely as React allows. Framework-specific Svelte features are mapped to React props, React nodes, render functions, and Provider-based configuration.

Features

• Full support for React 18/19, Tailwind CSS v4, and TypeScript.
• Mobile-first component set covering general controls, layout, navigation, data entry, display, and feedback.
• Rich APIs for configuring component behavior, styling, icons, animation, and interaction details.
• Built-in dark mode, runtime theme switching, custom theme generation, and 42 shared any-tdf themes.
• Chinese and English documentation, component examples, API tables, FAQ pages, and version notes.
• Internationalization support with 60+ built-in locale objects.
• Tree-shakable package exports and dedicated subpaths for components, types, themes, locales, and utilities.
• Scaffolding with create-rtdf for Vite, React, Tailwind CSS v4, TypeScript, icons, and theme presets.
• SVG symbol tooling through @any-tdf/vite-plugin-svg-symbol, with optional Iconify support.
• VS Code extension and AI Skill package for faster RTDF development.

Getting Started

Create a new RTDF project:

bun create rtdf@latest

Create a React, Vite, Tailwind CSS v4, TypeScript, Iconify, and multi-theme project:

bun create rtdf@latest my-app -t vrtt -l en_US -i iconify -m multi

Install RTDF in an existing React project:

bun add rtdf@3.0.0-alpha.0

Import the component styles once in your app entry:

import 'rtdf/style.css';

Use components from the root entry:

import { Button, ConfigProvider } from 'rtdf';
import { en_US } from 'rtdf/lang';

const App = () => (
	<ConfigProvider locale={en_US} theme="ANYTDF" mode="primary">
		<Button fill="solid">RTDF</Button>
	</ConfigProvider>
);

Preview Demo

Visit demo.rtdf.dev on a mobile browser, or scan the QR code to preview the mobile demo:

Quick Try

You can quickly try RTDF on StackBlitz's RTDF Demo.

Feedback and Communication

We recommend using GitHub Issues for direct and effective feedback and communication. Contributions of code are also highly appreciated. You can also choose from the following options:

• QQ Group
• QQ Discord
• Discord
• Discussions

Contributors

Sponsors

License

This project is licensed under the MIT License. Feel free to enjoy and contribute to this open-source project.

Star History