Build full featured Windows fluent UI apps using ReactJS.
https://virtualvivek.github.io/react-windows-ui/
You can use cra-template
to initialize project or use boilerplate
.
npx create-react-app MyApp --template windows-ui
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";
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);
}
import { Button, InputText } from "react-windows-ui";
const App = () => (
<>
<Button type="primary" value="Press Me" />
<InputText placeholder="Enter a text" />
</>
);
git clone https://github.com/virtualvivek/react-windows-ui.git
cd react-windows-ui
npm install
npm start
Head to the desired version Release.
Download the Release and start exploring !
cd to-your-downloaded-version
npm install
npm start
Here are some useful links.
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";
Support it by joining stargazers for this repository. ⭐
react-windows-ui
is licensed under MIT license
. View license.
Copyright (c) 2021 Vivek Verma