https://github.com/any-tdf/stdf

Mobile web component library based on Svelte and Tailwind
https://github.com/any-tdf/stdf

components design javascript mobile svelte tailwind ui-library unocss

Last synced: 10 days ago
JSON representation

Mobile web component library based on Svelte and Tailwind

Host: GitHub
URL: https://github.com/any-tdf/stdf
Owner: any-tdf
License: mit
Created: 2023-04-27T05:21:53.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2025-04-10T01:59:39.000Z (14 days ago)
Last Synced: 2025-04-13T13:57:35.789Z (10 days ago)
Topics: components, design, javascript, mobile, svelte, tailwind, ui-library, unocss
Language: Svelte
Homepage: https://stdf.design
Size: 8.01 MB
Stars: 679
Watchers: 5
Forks: 36
Open Issues: 8
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Security: SECURITY.md

Awesome Lists containing this project

README

        


[![Public STDF Status](https://github.com/any-tdf/stdf/actions/workflows/publish-stdf.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/publish-stdf.yml)

[![Releases Status](https://github.com/any-tdf/stdf/actions/workflows/releases.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/releases.yml)

[![Sync Status](https://github.com/any-tdf/stdf/actions/workflows/sync-demo.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/sync-demo.yml)

[![Public Create Status](https://github.com/any-tdf/stdf/actions/workflows/publish-create.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/publish-create.yml)

[![Public Icon Status](https://github.com/any-tdf/stdf/actions/workflows/publish-icon.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/publish-icon.yml)

[![Public VS Code Extension Status](https://github.com/any-tdf/stdf/actions/workflows/publish-vscode.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/publish-vscode.yml)

[![Sync Gitee Status](https://github.com/any-tdf/stdf/actions/workflows/sync-gitee.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/sync-gitee.yml)

[![Releases Site](https://github.com/any-tdf/stdf/actions/workflows/releases-site.yml/badge.svg)](https://github.com/any-tdf/stdf/actions/workflows/releases-site.yml)

[![Releases Demo](https://github.com/any-tdf/demo-stdf/actions/workflows/releases-demo.yml/badge.svg)](https://github.com/any-tdf/demo-stdf/actions/workflows/releases-demo.yml)

  

    

    

  

  

  
STDF


![](https://img.shields.io/badge/-Svelte-%23ff3e00?logo=svelte&logoColor=ffffff)

![](https://img.shields.io/badge/-Tailwind-%2300a6f4?logo=tailwindcss&logoColor=ffffff)

![](https://img.shields.io/badge/-TypeScript-%233178c6?logo=typescript&logoColor=ffffff)

[![npm](https://img.shields.io/npm/v/stdf?logo=npm&label=stdf&style=for-the-badge&color=aeb5f4&logoColor=DCE4FD&labelColor=010319)](https://www.npmjs.com/package/stdf)

[![GitHub stars](https://img.shields.io/github/stars/any-tdf/stdf?logo=github&label=star&style=for-the-badge&color=A1DAD7&logoColor=D9F8F2&labelColor=011918)](https://github.com/any-tdf/stdf)

[![GitHub license](https://img.shields.io/github/license/any-tdf/stdf?logo=github&style=for-the-badge&color=B9C46A&logoColor=F3F3CB&labelColor=161901)](https://github.com/any-tdf/stdf)

[![npm](https://img.shields.io/npm/dt/stdf?logo=npm&label=install&style=for-the-badge&color=FFCC33&logoColor=FFFDE8&labelColor=191301)](https://www.npmjs.com/package/stdf)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/stdf?logo=npm&label=minzip&style=for-the-badge&color=E29CD2&logoColor=F9D8ED&labelColor=190113)](https://www.npmjs.com/package/stdf)

[![npm](https://img.shields.io/npm/v/create-stdf?logo=npm&label=create&style=for-the-badge&color=ebb2ba&logoColor=FBDDDD&labelColor=190104)](https://www.npmjs.com/package/create-stdf)

[![npm](https://img.shields.io/npm/v/rollup-plugin-stdf-icon?logo=npm&label=icon&style=for-the-badge&color=8cf2be&logoColor=D5FCE3&labelColor=01190C)](https://www.npmjs.com/package/rollup-plugin-stdf-icon)

[![Visual Studio Marketplace Version (including pre-releases)](https://img.shields.io/visual-studio-marketplace/v/STDF.stdf-vscode-extension?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogICAgPHBhdGgKICAgICAgICBmaWxsPSIjRjBGQ0Q2IgogICAgICAgIGQ9Ik0zMC44NjUgMy40NDhMMjQuMjgyLjI4MWExLjk5IDEuOTkgMCAwIDAtMi4yNzYuMzg1TDkuMzk3IDEyLjE3MUwzLjkwMiA4LjAwNGExLjMzIDEuMzMgMCAwIDAtMS43MDMuMDczTC40MzkgOS42ODFhMS4zMyAxLjMzIDAgMCAwLS4wMDUgMS45NjlMNS4yIDE1Ljk5OUwuNDM0IDIwLjM0OGExLjMzIDEuMzMgMCAwIDAgLjAwNSAxLjk2OWwxLjc2IDEuNjA0YTEuMzMgMS4zMyAwIDAgMCAxLjcwMy4wNzNsNS40OTUtNC4xNzJsMTIuNjE1IDExLjUxYTEuOTgyIDEuOTgyIDAgMCAwIDIuMjcxLjM4NWw2LjU4OS0zLjE3MmExLjk5MyAxLjk5MyAwIDAgMCAxLjEzLTEuODAyVjUuMjQ4YzAtLjc2Ni0uNDQzLTEuNDY5LTEuMTM1LTEuODAyem0tNi44NiAxOS44MThMMTQuNDMyIDE2bDkuNTczLTcuMjY2eiIKICAgIC8+Cjwvc3ZnPgo=&label=extension&style=for-the-badge&color=c7f292&logoColor=F0FCD6&labelColor=0E1901)](https://marketplace.visualstudio.com/items?itemName=STDF.stdf-vscode-extension)

  


    简体中文

     • 

    Website

  



# Introduction

Mobile web component library based on [Svelte](https://svelte.dev) and [Tailwind](https://www.tailwindcss.com) .

> **S**imple • **T**hin • **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 that 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 three -party dependence, no need to worry about the three -party library version and 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.

- 🍺 IDE plugin for quickly viewing component APIs.

# Getting Started

```sh

pnpm create stdf

```

```sh

npm create stdf

# or

npm init stdf

# or

npx create-stdf

```

```sh

bun create stdf

```

```sh

yarn create stdf

```

# Preview Demo

Please scan the QR code to access the mobile demo:

  

  

# 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



  



# Sponsors



  





  



# 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