SayeedAfridi / react-windows-ui

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

react-windows-ui

Build full featured Windows fluent UI apps using ReactJS.

Demo & Docs

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

Getting Started

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

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

Boilerplate

Manual Installation

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

See Manual Method

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:

app-config.css

: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

View Docs for specific version

Head to the desired version Release.
Download the Release and start exploring !

cd to-your-downloaded-version
npm install
npm start

Links

Here are some useful links.

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

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";

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