Home

Awesome

<p align="center"> <img src="https://github.com/virtualvivek/windows-ui/blob/master/src/assets/logo.png" width="224" /> </p> <h1 align="center">windows-ui</h1> <p align="center">Build Windows native look & feel apps using Html, CSS & JavaScript.</p> <p align="center"><a href="https://windows-ui.github.io/" target="_blank">Explore Project Docs »</a></p> <meta name='keywords' content='Windows 10,Windows 11, FluentUI, html, css, js'> <meta name='description' content='Build Windows Fluent UI apps using html, css & js'> <meta name='author' content='Vivek Verma'> <p align="center"><img src="https://github.com/virtualvivek/windows-ui/blob/master/src/assets/preview_header_dark.png" width="500" /></p>

Status

<a href="https://www.npmjs.com/package/windows-ui-fabric"> <img src="https://img.shields.io/github/package-json/v/virtualvivek/windows-ui?style=flat-square&color=CB3837&logo=npm&logoColor=ffffff&label=npm" alt="npm" /> </a><br/> <a href="https://github.com/virtualvivek/windows-ui/tree/master/dist/"> <img src="https://img.shields.io/github/size/virtualvivek/windows-ui/dist/windows-ui.min.css?style=flat-square&logo=css3&color=1572B6&label=windows-ui.min.css" alt="windows-ui.min.css" /> </a> <a href="https://github.com/virtualvivek/windows-ui/tree/master/dist/"> <img src="https://img.shields.io/github/size/virtualvivek/windows-ui/dist/windows-ui.min.js?style=flat-square&logo=JavaScript&color=F7DF1E&label=windows-ui.min.js" alt="windows-ui.min.js" /> </a><br/> <a href="https://github.com/windows-ui/icons/tree/main/dist/" target="_blank"> <img src="https://img.shields.io/github/size/windows-ui/icons/dist/winui-icons.min.css?style=flat-square&color=EF2D5E&logo=MaterialDesignIcons&logoColor=ffffff&label=winui-icons.min.css" /> </a> <a href="https://github.com/windows-ui/icons/tree/main/dist/" target="_blank"> <img src="https://img.shields.io/github/size/windows-ui/icons/dist/winui-icons.slim.css?style=flat-square&color=00A98F&logo=FontAwesome&logoColor=ffffff&label=winui-icons.slim.css" /> </a><br/> <a href="https://github.com/windows-ui/icons"> <img src="https://img.shields.io/badge/Icons-Docs-darklime.svg?style=flat-square&color=0078F0&logo=Snowpack" alt="Icons" /> </a> <a href="https://github.com/windows-ui/colors"> <img src="https://img.shields.io/badge/Colors-Docs-darklime.svg?style=flat-square&color=512BD4&logo=LaravelHorizon&logoColor=ffffff" alt="Colors" /> </a><br/> <a href="https://github.com/windows-ui/boilerplate"> <img src="https://img.shields.io/badge/Boilerplate-Template-darklime.svg?style=flat-square&color=006C66&logo=HeadlessUI&logoColor=ffffff" alt="Boilerplate" /> </a> <h1>Getting Started</h1>

You can start a new project with a boilerplate.

Imports

You can use a local copies or import via jsDelivr.

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/windows-ui-fabric@4.0.2/dist/config/app-config.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/windows-ui-fabric@4.0.2/dist/windows-ui.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- Icons -->
<link href="https://cdn.jsdelivr.net/npm/windows-ui-fabric@4.0.2/dist/icons/fonts/fonts.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/windows-ui-fabric@4.0.2/dist/windows-ui.min.js" crossorigin="anonymous"></script>

npm

You can either install via npm.

$ npm install windows-ui-fabric

@import "windows-ui-fabric/dist/config/app-config.css";
@import "windows-ui-fabric/dist/windows-ui.min.css";
@import "windows-ui-fabric/dist/icons/winui-icons.css";

Find this project useful? :heart:

Support it by joining stargazers for this repository. :star:

License

Windows-ui is licensed under MIT License • Copyright (c) virtualvivek.