DEV Community

loading...
Cover image for Build Windows10 native like ui apps using react-windows-ui

Build Windows10 native like ui apps using react-windows-ui

virtualvivek profile image Vivek Verma ・1 min read

fluentUI
As Microsoft introduces the new fluent ui design to their windows apps most of the developers implementing the interface to their native windows apps.

After Electronjs establishes a connection to build and deploy your PWA as a native app there is a need to replicate this fluent ui design to the web platform.

Here comes react-windows-ui a web based library build using reactjs to produce more rich feel of a native windows apps using web architecture, It resembles on components to develop fast PWA or native apps with coupling with electronjs.

Adaptive UI

adaptiveUI

Repository

GitHub logo virtualvivek / react-windows-ui

Build full featured Windows fluent UI apps using ReactJS. Provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

react-windows-ui

Build full featured Windows fluent UI apps using ReactJS.

Build License: MIT Version Live Demo NPMJS

Adaptive UI

Demo

https://virtualvivek.github.io/react-windows-ui/

Installation

npm install react-windows-ui

Getting Started

import { NavBar,NavPageContainer, ..} from 'react-windows-ui'
Enter fullscreen mode Exit fullscreen mode
// Be sure to include styles at some point, probably during your bootstraping
import 'react-windows-ui/config/app-config.css'
import 'react-windows-ui/dist/react-windows-ui.min.css'
import 'react-windows-ui/icons/fonts/fonts.min.css'
Enter fullscreen mode Exit fullscreen mode

app-config

app-config file contains the primary AppColor, Fontfamily used by the app
‣ You can import default app-config using this file app-config.css
OR
Create your own like this

:root {
    --AppColor: #6632a8;
    /* Change color you like */
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
    /* Change fontfamily you like */
}
Enter fullscreen mode Exit fullscreen mode

‣ Example Code

https://github.com/virtualvivek/react-windows-ui/tree/main/src/demo

‣ Library Source Code

https://github.com/virtualvivek/react-windows-ui/tree/main/src/lib

https://www.npmjs.com/package/react-windows-ui

Find this library useful? ❤️

Support it by joining stargazers for this repository.

License

react-windows-ui is licensed under MIT license

Demo

https://virtualvivek.github.io/react-windows-ui/

Installation

npm install react-windows-ui
Enter fullscreen mode Exit fullscreen mode

Run demo locally

git clone https://github.com/virtualvivek/react-windows-ui.git
npm install
npm start
Enter fullscreen mode Exit fullscreen mode

npm

https://www.npmjs.com/package/react-windows-ui

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐

Final Thoughts

I think this project will glorify web developers specially from field of react can build Windows design system hybrid or native apps with ease. It provides a responsive design flow to support a broad field of devices.

Discussion (24)

pic
Editor guide
Collapse
myzel394 profile image
Myzel394

I'm really sorry, this already exists: github.com/microsoft/fluentui :(

Collapse
btlm profile image
btlm

Hey! Don't you think saying such things is demotivating? Many (mainly beginners) programmers won't do side-projects because of thinking "it already exists so why should I do it?". Meanwhile, we have multiple applications for listening to music, web browsers, games even frameworks and libraries doing basically the same things. And developers of them didn't think "don't do this new music app, there are plenty of such in the market".

The best approach is: I know there are many things like my project but how can I make mine better than others? What can I improve, do in a different way? Innovative?

Do not kill creativity!

Collapse
virtualvivek profile image
Vivek Verma Author

I visited this repo and I liked the interface but what i think is our react-windows-ui follows different approach isn't it? and one more thing @myzel394 i've seen that codepen snack and i like to implement it in my project thanks for the suggestion :)

Collapse
myzel394 profile image
Myzel394

Yes you are correct. I didn't really look at the fluent UI design repo - it is indeed different from yours. Thanks for your effort :)

Thread Thread
virtualvivek profile image
Vivek Verma Author

Thanks for your support @myzel394 :)

Thread Thread
myzel394 profile image
Myzel394

BTW what browsers are you targeting? Thought about making a pr for thir feature with css variables.

Ps: I think you should add you eslintcache to gitignore

Thread Thread
virtualvivek profile image
Vivek Verma Author • Edited

I specially test chrome ,opera and mozilla before publishing the package , i am using .eslintcache for pushing the gh-pages branch ...
You can try the demo on any browser expect IE. if you find any bug please ping me from an issue.

I think the feature with css you said have been linked with this.
github.com/virtualvivek/react-wind...

Collapse
ceoshikhar profile image
Collapse
ceoshikhar profile image
Shikhar Sharma

Great UI library! Do make sure to post about it on Reddit.

Collapse
virtualvivek profile image
Vivek Verma Author

Thankyou soo much @ceoshikhar for you suggestion, surely i'll consider this 😊

Collapse
rashil2000 profile image
Rashil Gandhi

Hey Vivek!

This looks awesome! There's a very similar project I just want you to know about - react-uwp.com

Collapse
virtualvivek profile image
Vivek Verma Author

Hey Rashil ,
Thanks for sharing this link I checked this project the best part is i loved the hover effect they used in their project :)
Thanks for your Support!

Collapse
rashil2000 profile image
Rashil Gandhi

Yes, it's pretty sweet, and it was the only Fluent-like library when I was developing my project DYSTuss. Check it out, it's fully responsive and very much like Windows 10.

Now whenever I develop a new project, I'll make sure to check out your library first.

Thread Thread
virtualvivek profile image
Vivek Verma Author

Hey Rashil,
I visited your project and was pretty awesome for introvert like me to do stuff anonymously, I feel blessed if you use react-windows-ui in your project :)
Thankyou for your support.

Collapse
khangnd profile image
Khang

This looks stunning. I have spread the words, hope you get a deserved recognition :)

Collapse
virtualvivek profile image
Vivek Verma Author

Hey @khangnd ,
I came across your projects github.com/khang-nd/7.css and github.com/khang-nd/windows7 you recreated the legendary Windows7 with web tech that's insane :)

Collapse
khangnd profile image
Khang

Hey thanks bro, it was just me being a Windows maniac and wanted to practice some CSS 😄

Collapse
virtualvivek profile image
Vivek Verma Author

Glad you liked the project @khangnd 😊 even the little recognition from people like you made my day ,Thanks for your support.

Collapse
taimoorkhan profile image
Taimoor khan

Wow amazing work brother really loved it ❤

Collapse
virtualvivek profile image
Vivek Verma Author • Edited

Thankyou soo much brother @taimoorkhan for your support 😊

Collapse
yaser profile image
Yaser Al-Najjar

Hey Vivek... awesome job!

Could you please follow me back to discuss something.

Collapse
virtualvivek profile image
Vivek Verma Author

Hey @yaser thankyou for your support :)
I followed you back feel free to discuss anything.

Collapse
imakshath profile image
akshath

Wow . Awesome!

Collapse
virtualvivek profile image
Vivek Verma Author • Edited

Thanks @imakshath bro :) UI designing is under those things I can do with my heart!