react-windows-ui

Build full featured Windows fluent UI apps using ReactJS.

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.css file from app-config.css.
OR
‣ Create your own like this

app-config.css

: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

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

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐

License

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