windows-ui-fabric/README.md

Build Windows Fluent UI apps using Html, CSS & JavaScript. Comes with Rich Native Like Components.

<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 Fluent UI apps using <b>Html</b>, <b>CSS</b> & <b>JavaScript</b>.</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](https://github.com/windows-ui/boilerplate).

# Imports
You can use a local copies or import via [jsDelivr](https://www.jsdelivr.com/).

```html
<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/windows-ui-fabric@4.0.2/dist/config/app-config.css.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](https://www.npmjs.com/package/windows-ui-fabric).

```sh
$ 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**](https://github.com/virtualvivek/windows-ui/stargazers) for this repository. :star:


# License

`Windows-ui` is licensed under [MIT License](https://github.com/virtualvivek/windows-ui/blob/master/LICENSE) • 
Copyright (c) [**virtualvivek**](https://github.com/virtualvivek).