react-windows-ui

Build full featured Windows fluent UI apps using ReactJS.

Demo ⚡

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

Getting Started

You can use cra-template to initialize project or use boilerplate.

npx create-react-app MyAppName --template windows-ui

Boilerplate

Manual Installation

If you don't want cra or boilerplate you can manually install it on your porject.

npm install react-windows-ui

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

By default project uses app-config.css.
Or create your own config file with custom PrimaryColor/Fontfamily like this below:

:root {
  --PrimaryColor: #0078D7; /* Change of your choice */
  --PrimaryColorLight: #47aeff;  /* Lighter version of --PrimaryColor for DarkMode */
}
body {
  font-family: "Segoe UI";
}
::selection {
  color: #ffffff;
  background-color: var(--PrimaryColor);
}

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

RTL Support

Distribute layout direction from Right to Left.

// include rtl styles at some point, probably during your bootstraping
import "react-windows-ui/dist/react-windows-ui-rtl.min.css";

Links

Here are some useful links.

• NPM CRA-Template
• NPM React-Windows-UI Library

Find this library useful? :heart:

Support it by joining stargazers for this repository. :star:

License

react-windows-ui is licensed under MIT license. View license.
Copyright (c) 2021 Vivek Verma