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.

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

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 */
}

Usage

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

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

Boilerplate

You can initialize you Repo with this Template

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

Windows 11 Styles.css

// include windows 11 styles at some point, probably during your bootstraping
...
import 'react-windows-ui/dist/react-windows-ui-sunvalley.min.css'
...

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