<div align="center">

<picture> <source media="(prefers-color-scheme: dark)" srcset="https://stdf.design/assets/favicon_logo_dark/android-chrome-512x512.png"> <img src="https://stdf.design/assets/favicon_logo/android-chrome-512x512.png" alt="logo" width="120" height="auto" /> </picture> <h1>STDF</h1>

<h3> <a href="https://stdf.design" target="_blank">Website</a> </h3> <p> <a href="https://github.com/any-tdf/stdf/blob/main/README.md" target="_blank">English</a> <span> • </span> <a href="https://github.com/any-tdf/stdf/blob/main/readme/README_zh_CN.md" target="_blank">简体中文</a> <span> • </span> <a href="https://github.com/any-tdf/stdf/blob/main/readme/README_zh_TW.md" target="_blank">繁體中文</a> <span> • </span> <a href="https://github.com/any-tdf/stdf/blob/main/readme/README_ja_JP.md" target="_blank">日本語</a> <span> • </span> <a href="https://github.com/any-tdf/stdf/blob/main/readme/README_ko_KR.md" target="_blank">한국어</a> <span> • </span> <a href="https://github.com/any-tdf/stdf/blob/main/readme/README_es_ES.md" target="_blank">Español</a> <span> • </span> <a href="https://github.com/any-tdf/stdf/blob/main/readme/README_ru_RU.md" target="_blank">Русский</a> <span> • </span> <a href="https://github.com/any-tdf/stdf/blob/main/readme/README_fr_FR.md" target="_blank">Français</a> <span> • </span> <a href="https://github.com/any-tdf/stdf/blob/main/readme/README_de_DE.md" target="_blank">Deutsch</a> <span> • </span> <a href="https://github.com/any-tdf/stdf/blob/main/readme/README_it_IT.md" target="_blank">Italiano</a> </p> </div>

Introduction

Mobile web component library based on Svelte and Tailwind .

Simple • Tiny • Design • Fast

Features

• 🔥 Full support for Svelte v5, Tailwind CSS v4, and TypeScript.
• 🚀 No runtime, no virtual DOM — runs faster online.
• 🧰 Rich API — easily configure component styles to meet your needs.
• 🍭 Supports dark mode and multiple theme configuration.
• 📖 Provides extensive Chinese and English documentation and component examples.
• 🌍 Supports internationalization, with 60+ built-in language packages.
• 🫰 User-friendly interaction, animation parameters can be configured, and custom themes are supported.
• 🤝 Supports Tailwind libraries such as UnoCSS.
• 🫡 No third-party dependencies — no need to worry about library versions or security issues.
• 📦 Supports on-demand import to reduce bundle size.
• 🪜 Comes with a scaffolding tool for quick project creation.
• 🔗 Comes with an SVG merging plugin for quickly merging SVG files, support Iconify.
• 🍺 IDE plugin for quickly viewing component APIs.

Getting Started

<!-- :::code-groups --> <!-- bun -->

bun create stdf@latest

<!-- :: --> <!-- pnpm -->

pnpm create stdf@latest

<!-- :: --> <!-- npm -->

npm create stdf@latest
# or
npm init stdf@latest
# or
npx create-stdf@latest

<!-- :: --> <!-- yarn -->

yarn create stdf@latest

<!-- ::: -->

Preview Demo

Please scan the QR code to access the mobile demo:

<picture> <source media="(prefers-color-scheme: dark)" srcset="https://stdf.design/assets/qr/demo_en_dark.png"> <img src="https://stdf.design/assets/qr/demo_en.png" width="220" height="220" > </picture>

Quick Try

You can quickly try STDF on StackBlitz's STDF 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

<a href="https://github.com/any-tdf/stdf/graphs/contributors"> <img src="https://contrib.nn.ci/api?repo=any-tdf/stdf" /> </a>

Sponsors

<a href="https://github.com/sbscan" target="_blank"> <img src="https://avatars.githubusercontent.com/sbscan" width="60" height="auto" style="border-radius:100%" > </a> <a href="https://github.com/MuGuiLin" target="_blank"> <img src="https://avatars.githubusercontent.com/MuGuiLin" width="60" height="auto" style='border-radius:100%' > </a> <a href="https://github.com/yuedanlabs" target="_blank"> <img src="https://avatars.githubusercontent.com/yuedanlabs" width="60" height="auto" style='border-radius:100%' > </a>

License

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

Star History

<a href="https://github.com/any-tdf/stdf"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=any-tdf/stdf&type=Timeline&theme=dark" /> <img alt="Star History Chart" width="100%" src="https://api.star-history.com/svg?repos=any-tdf/stdf&type=Timeline" /> </picture> </a>