stdf
<div align="center"> [](https://github.com/any-tdf/stdf/actions/workflows/publish-stdf.yml) [](https://github.com/any-tdf/stdf/actions/workflows/releases-stdf.yml) [](https://github.com/any-tdf/stdf/actions/workflows/publish-create.yml) [](https://github.com/any-tdf/stdf/actions/workflows/publish-vscode.yml) [](https://github.com/any-tdf/stdf/actions/workflows/sync-gitee.yml) [](https://github.com/any-tdf/stdf/actions/workflows/releases-site.yml) <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>    [](https://www.npmjs.com/package/stdf) [](https://www.npmjs.com/package/create-stdf) [](https://www.npmjs.com/package/@any-tdf/vite-plugin-svg-symbol) [](https://www.npmjs.com/package/@any-tdf/vite-plugin-md-ts) [](https://marketplace.visualstudio.com/items?itemName=STDF.stdf-vscode-extension) [](https://github.com/any-tdf/stdf) [](https://github.com/any-tdf/stdf) <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](https://svelte.dev) and [Tailwind](https://www.tailwindcss.com) . > **S**imple • **T**iny • **D**esign • **F**ast # 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 --> ```sh bun create stdf@latest ``` <!-- :: --> <!-- pnpm --> ```sh pnpm create stdf@latest ``` <!-- :: --> <!-- npm --> ```sh npm create stdf@latest # or npm init stdf@latest # or npx create-stdf@latest ``` <!-- :: --> <!-- yarn --> ```sh 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](https://stackblitz.com/github/any-tdf/demo-stdf?startScript=dev_en). # Feedback and Communication We recommend using [GitHub Issues](https://github.com/any-tdf/stdf/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](https://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=U8ZlXJ3KVpTI9oZzs1jBnyWc3gVA0h6Y&authKey=ScWu0nU9g8BqNsC7o2eYkESwgVDVz9vzGNZEb17MrEAay9%2F7bTkXDiLJRIzo2vrg&noverify=0&group_code=581073686) - [QQ Discord](https://pd.qq.com/s/fdd8incyr) - [Discord](https://discord.gg/DMkHu8GGre) - [Discussions](https://github.com/any-tdf/stdf/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](https://github.com/any-tdf/stdf/blob/main/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>