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

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