[](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/sync-demo.yml)
[](https://github.com/any-tdf/demo-stdf/actions/workflows/releases-demo.yml)
[](https://github.com/any-tdf/stdf/actions/workflows/publish-create.yml)
[](https://github.com/any-tdf/stdf/actions/workflows/publish-icon.yml)
[](https://github.com/any-tdf/stdf/actions/workflows/publish-md.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)
STDF



[](https://www.npmjs.com/package/stdf)
[](https://www.npmjs.com/package/create-stdf)
[](https://www.npmjs.com/package/rollup-plugin-stdf-icon)
[](https://www.npmjs.com/package/rollup-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)
English
•
简体中文
•
繁體中文
•
日本語
•
한국어
•
Español
•
Русский
•
Français
•
Deutsch
•
Italiano
# 介紹
基於 [Svelte](https://svelte.dev) 和 [Tailwind](https://www.tailwindcss.com) 的行動端網頁元件庫。
> **S**imple • **T**iny • **D**esign • **F**ast
# 特色
- 🔥 完全支援 Svelte v5、Tailwind CSS v4 和 TypeScript。
- 🚀 無執行時、無虛擬 DOM — 線上執行更快速。
- 🧰 豐富的 API — 輕鬆配置元件樣式以滿足您的需求。
- 🍭 支援深色模式和多主題配置。
- 📖 提供詳盡的中英文文件和元件範例。
- 🌍 支援國際化,內建 60+ 種語言包。
- 🫰 友善的互動體驗,動畫參數可配置,支援自訂主題。
- 🤝 支援 UnoCSS 等 Tailwind 函式庫。
- 🫡 無第三方依賴 — 無需擔心函式庫版本或安全性問題。
- 📦 支援按需匯入以減少打包大小。
- 🪜 附帶腳手架工具,快速建立專案。
- 🔗 附帶 SVG 合併外掛,快速合併 SVG 檔案,支援 Iconify。
- 🍺 IDE 外掛,快速檢視元件 API。
# 開始使用
```sh
pnpm create stdf@latest
```
```sh
npm create stdf@latest
# 或
npm init stdf@latest
# 或
npx create-stdf@latest
```
```sh
bun create stdf@latest
```
```sh
yarn create stdf@latest
```
# 預覽示範
請掃描 QR 碼存取行動端示範: