Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wiseaidev/yew-components-tailwind

A Collection of Yew Framework Components - Tailwind.
https://github.com/wiseaidev/yew-components-tailwind

hacktoberfest rust tailwind tailwindcss yew yew-form yew-framework yew-functional

Last synced: 15 days ago
JSON representation

A Collection of Yew Framework Components - Tailwind.

Awesome Lists containing this project

README 

        
# 📚 Yew Tailwind Components



[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/wiseaidev)

[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)

[![made-with-rust](https://img.shields.io/badge/Made%20with-Rust-1f425f.svg?logo=rust&logoColor=white)](https://www.rust-lang.org/)

[![Share On Reddit](https://img.shields.io/badge/share%20on-reddit-red?style=flat-square&logo=reddit)](https://reddit.com/submit?url=https://github.com/wiseaidev/yew-components-tailwind&title=A%20Collection%20of%20Reusable%20Yew%20Framework%20Components%20-%20Tailwind.)

[![Share On Ycombinator](https://img.shields.io/badge/share%20on-hacker%20news-orange?style=flat-square&logo=ycombinator)](https://news.ycombinator.com/submitlink?u=https://github.com/wiseaidev/yew-components-tailwind&t=A%20Collection%20of%20Reusable%20Yew%20Framework%20Components%20-%20Tailwind.)

[![Share On Twitter](https://img.shields.io/badge/share%20on-twitter-03A9F4?style=flat-square&logo=twitter)](https://twitter.com/share?url=https://github.com/wiseaidev/yew-components-tailwind&text=A%20Collection%20of%20Reusable%20Yew%20Framework%20Components%20-%20Tailwind.)

[![Share On Facebook](https://img.shields.io/badge/share%20on-facebook-1976D2?style=flat-square&logo=facebook)](https://www.facebook.com/sharer/sharer.php?u=https://github.com/wiseaidev/yew-components-tailwind )

[![Share On Linkedin](https://img.shields.io/badge/share%20on-linkedin-3949AB?style=flat-square&logo=linkedin)](https://www.linkedin.com/shareArticle?url=https://github.com/wiseaidev/yew-components-tailwind&title=A%20Collection%20of%20Reusable%20Yew%20Framework%20Components%20-%20Tailwind.)



This repository contains a collection of reusable components written in Rust for the Yew framework. The components cover a range of functionalities, from login and register forms to contact us, forget password forms, etc. Each component is implemented using the Tailwind CSS framework.



## 📖 Prologue



[Yew](https://yew.rs/) is a modern Rust framework for building multi-threaded front-end web applications. It aims to provide a productive and pleasant experience for developing front-end applications in Rust, leveraging its safety and performance benefits. By utilizing Yew, we can create interactive and efficient web applications with ease.



## 🚀 Building and Running



1. Fork/Clone the GitHub repository.



	```bash

	git clone https://github.com/wiseaidev/yew-components-tailwind

	```



1. Navigate to the application directory.



	```bash

	cd yew-components-tailwind

	```



1. Run the client:



	```sh

	trunk serve --port 3000

	```



Navigate to http://localhost:3000 to explore all available components.



## 🌀 Tailwind CSS Components



This section lists components implemented using the [Tailwind CSS](https://tailwindcss.com/) framework. Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to quickly build custom and responsive designs.



### 🔐 Login Forms



| ID | Preview | Demo | Localhost |

|---|---|---|---|

| 1 | ![Component 1](./assets/form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-1.netlify.app/) | [Localhost](http://localhost:3000/login/1) |

| 2 | ![Component 2](./assets/form-two.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-2.netlify.app/) | [Localhost](http://localhost:3000/login/2) |

| 3 | ![Component 3](./assets/form-three.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-login-form-3.netlify.app/) | [Localhost](http://localhost:3000/login/3) |



### 📬 Contact Forms



| ID | Preview | Demo | Localhost |

|---|---|---|---|

| 1 | ![Component 1](./assets/contact-form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-contact-form-1.netlify.app/) | [Localhost](http://localhost:3000/contact/1) |



### 🔢 Multi-Steps Forms



| ID | Preview | Demo | Localhost |

|---|---|---|---|

| 1 | ![Component 1](./assets/multi-step-form-one.png) | [![Netlify Status](https://api.netlify.com/api/v1/badges/68d1469e-05ee-4acd-9368-b67d9e53bc2e/deploy-status)](https://tailwind-multi-step-form-1.netlify.app/) | [Localhost](http://localhost:3000/multi-step/1) |



## 🤝 Contributing



We welcome contributions to enhance the Yew Tailwind Components repository! To contribute, please follow the [`CONTRIBUTING.md`](CONTRIBUTING.md) file guidelines. Thank you for helping make this project better!



## 📜 License



This project and the accompanying materials are made available under the terms and conditions of the [` Apache License Version 2.0`](https://github.com/wiseaidev/yew-components-tailwind/blob/main/LICENSE).



## 📝 Epilogue



In conclusion, this repository is a treasure trove of reusable components crafted in Rust for the Yew framework, offering a plethora of functionalities ranging from user authentication to contact forms and more. Each component showcases the capabilities of the CSS Tailwind CSS framework. Whether you're a Rust enthusiast or a front-end developer seeking powerful and flexible components, this collection has something to offer.



Happy coding! 🚀