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

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

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 model to develop fast PWA or Native apps with coupling with electronjs or NodeGUI.

Adaptive UI

Repository

virtualvivek / react-windows-ui

Build 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.

Adaptive UI

Demo ⚡

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

Installation

$ npm install react-windows-ui

Getting Started

// 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'

Configuration

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

:root {
  --PrimaryColor: #6632a8;  /* Change color you like */
}
body {
  font-family: "Segoe UI";  /* Change fontfamily you like */
}

Usage

import { Button, InputText } from "react-windows-ui";

const App = () => (
  <>
    <Button type="primary" value="Press Me" />
    <InputText placeholder="Enter a text" />
  </>
);

Boilerplate

‣ You…

View on GitHub

Demo ⚡

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

Installation

$ npm install react-windows-ui

Getting Started

//Be sure to include styles at some point, probably during 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'

Usage

import { Button, InputText } from 'react-windows-ui';

const App = () => (
  <>
    <Button type="primary" value="Press Me" />
    <InputText placeholder="Enter a text" />
  </>
);

Run Demo Locally

$ git clone https://github.com/virtualvivek/react-windows-ui.git
$ cd react-windows-ui
$ npm install
$ npm start

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.

Comments

[Shikhar]

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

[Vivek Verma]

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

[Khang]

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

[Vivek Verma]

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

[Vivek Verma]

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 :)

[Khang]

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

[Myzel394]

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

[Shikhar]

Damn :(

[Vivek Verma]

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 :)

[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 :)

[Vivek Verma]

Thanks for your support @myzel394 :)

[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

[Vivek Verma]

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...

[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!

[Muhammad Hasnain]

I don't think he is responsible for anyone's feelings or creativity nor is he trying to kill it.

[Muhammad Hasnain]

Fluent-UI isn't a Windows-10 UI. Office suite, Microsoft websites and edge related stuff, sure but not the Windows-10 UI.

[Yaser Al-Najjar]

Hey Vivek... awesome job!

Could you please follow me back to discuss something.

[Vivek Verma]

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

[Rashil Gandhi]

Hey Vivek!

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

[Vivek Verma]

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!

[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.

[Vivek Verma]

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.

[akshath]

Wow . Awesome!

[Vivek Verma]

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

[Taimoor khan]

Wow amazing work brother really loved it ❤

[Vivek Verma]

Thankyou soo much brother @taimoorkhan for your support 😊

[Muhammad Hasnain]

This is absolutely bonkers man! Love it!

[Vivek Verma]

Thankyou soo much @hasnaindev for your support :)

[EhsanullahQaderi]

Wow Awesome, thanks!
I have been searching for windows UI since two years, now i found yours project really amazing. could you please tell me that you have plan to add windows like table component and RTL support?

[Vivek Verma]

Hi @ehsanullahqadari ,
I feel great to hear about developers like you appreciate my project :)
yes sure i can add components if you wish
@ehsanullahqadari could you provide me some screenshots that what exactly you want, I will add that component with same look n feel soon as possible and also if suggest me some css changes to enable RTL will be appreciable.

[EhsanullahQaderi]

Ok thanks!
@fazli596 also requested the same features will make issue for that

[Vivek Verma]

Hi @ehsanullahqadari ,
I started working on TableView component and also allocate special tab with its dropdown code example on virtualvivek.github.io/react-windo...
soon and will also be available on npm on release -v2.0.8

[Vivek Verma]

Hi @ehsanullahqadari and @fazli596 ,
I have updated the react-windows-ui package to -v2.0.8
Additional Features:

• Added TableView component.

TableView component includes toggle arranging columns, searchable columns, able to add jsx components refer demo for full implementation.

• Added react-windows-ui-rtl.min.css for right to left direction support.

See Demo: virtualvivek.github.io/react-windo...

To See TableView component goto Tab 10th
To get a lookup on how to use RTL
View Markdown of : github.com/virtualvivek/react-wind...

[fazli596]

hi sir
I check that, and that was so great.
It is awesome.
But I didn't get how to use RTL feature.
Could you please add an option to it like "Day" and "Night" option ?
That would be so great.
Anyway, Thank you so much.
Appreciate it.

[Vivek Verma]

Hi @fazli596 ,
Thanks for appreciating the efforts !

How to use RTL

Add react-windows-ui-rtl.min.css at your index.js / index.ts :

import 'react-windows-ui/config/app-config.css'
import 'react-windows-ui/dist/react-windows-ui.min.css'
import 'react-windows-ui/dist/react-windows-ui-rtl.min.css' // add this here
import 'react-windows-ui/icons/fonts/fonts.min.css'

OR

If you are planning to add RTL with some condition use like this:

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'

if( someCondition ) {
    require('react-windows-ui/dist/react-windows-ui-rtl.min.css');
}

For Day - Night Theme Switching use

import { SwitchDayNight } from 'react-windows-ui'

render (
  <>
     <SwitchDayNight />
  </>
)

or otherwise i will add full implementation using predefined functions and other stuff regarding theming in the demo soon.

[fazli596]

ok,
let me check it and then I will let you know if there is any problem.
Thank you so much.

[EhsanullahQaderi]

Thank you I checked that, was really awesome.

[fazli596]

This is exactly I was searching for.
Awesome and great work.
Love it.
Would you please add "Table" component to it?
That will be super great.

[Vivek Verma]

Hi @fazli596 ,
Thankyou soo much for your support :)
When devs like you find my work usefull its made my day,
Yes off course i will add Table Component as soon as possible
also suggested by @ehsanullahqadari and one more feature RTL will also be possible with next release.

[fazli596]

Ohhh
That will be nice
Thank you so much for considering our comments.
I am really happy and eagerly waiting for the next release.
Wish you all the best.

[Vivek Verma]

Hi @fazli596 ,
Can you provide me some screenshots of the Table Component so that we can use it as a blueprint.

[fazli596]

Hi sir
Yeah sure
Check the below one
It is very simple and nice I think

[Vivek Verma]

hi @fazli596 ,
I couldn't able to see the image maybe some server issue,
if this issue persist you can also send the image over [e-mail]
or by creating an issue on github.com/virtualvivek/react-wind...