react-windows-ui

react-windows-uiv

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.

Adaptive UI

md_img_adaptive

View Demo View Github

Installation

$ npm install react-windows-ui
Ruby

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

app-config

‣ app-config.css file contains the PrimaryColor, Fontfamily used by the app.

‣ You can import default app-config using this 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 */
}
CSS

Usage

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

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

Boilerplate

md_img_boilerplate_screen

You can initialize you Repo with this Template

md_img_template_boilerplate

OR

Clone as a Repository:
virtualvivek/react-windows-ui-boilerplate

Run Demo Locally

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

Windows 11 Styles.css

![md_promo_w11](/content/images/2021/09/md_promo_w11.png) 
// include windows 11 styles at some point, probably during your bootstraping
...
import 'react-windows-ui/dist/react-windows-ui-sunvalley.min.css'
...
Js

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

Links

Name Details Link
Example Codes Components implementation demo Example LINK
Library Source Directory Folder publish to npm Library LINK
Library SCSS Source Style scss source code SCSS LINK
TypeScript Type Definitions Typescript index.d.ts import file D.TS LINK