Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/microsoft/fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://github.com/microsoft/fluentui

components fluent microsoft office-ui-fabric react react-components

Last synced: 3 days ago
JSON representation

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Host: GitHub
URL: https://github.com/microsoft/fluentui
Owner: microsoft
License: other
Created: 2016-06-06T15:03:44.000Z (over 8 years ago)
Default Branch: master
Last Pushed: 2024-10-29T15:12:12.000Z (about 1 month ago)
Last Synced: 2024-10-29T15:19:35.718Z (about 1 month ago)
Topics: components, fluent, microsoft, office-ui-fabric, react, react-components
Language: TypeScript
Homepage: https://react.fluentui.dev
Size: 658 MB
Stars: 18,473
Watchers: 286
Forks: 2,725
Open Issues: 590
Metadata Files:
- Readme: README.md
- Changelog: change/@fluentui-babel-preset-global-context-28602215-c268-452d-85d9-00ba63d8ed0f.json
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md

Awesome Lists containing this project

awesome-react-cn - Fluent UI - A set of React components for building Microsoft web experiences (Uncategorized / Uncategorized)
awesome - microsoft/fluentui - Fluent UI web represents a collection of utilities, React components, and web components for building web applications. (TypeScript)
awesome-react - Fluent UI - A set of React components for building Microsoft web experiences. ![](https://img.shields.io/github/stars/microsoft/fluentui.svg?style=social&label=Star) (UI Frameworks / style)
awesome-web-components - Repository
awesome-learning-resources - Fluent UI - A set of React components for building Microsoft web experiences (Uncategorized / Uncategorized)
awesome-starts - microsoft/fluentui - Fluent UI web represents a collection of utilities, React components, and web components for building web applications. (TypeScript)
react-cheatsheet - Fluent UI
awesome-list - fluentui
awesome-react-components - fluentui - UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. (UI Frameworks / Responsive)
best-of-react - GitHub - 4% open · ⏱️ 06.06.2024): (UI Frameworks & Libraries)
fucking-awesome-react-components - fluentui - UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. (UI Frameworks / Responsive)
StarryDivineSky - microsoft/fluentui
awesome-react - Fluent UI - Fluent UI web represents a collection of utilities, React components, and web components for building web applications. ` 📝 2 days ago` (React [🔝](#readme))
awesome-react - fluentui - Microsoft's Fluent UI (**Awesome React** [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) / React)
jimsghstars - microsoft/fluentui - Fluent UI web represents a collection of utilities, React components, and web components for building web applications. (TypeScript)
awesome-star-libs - microsoft / fluentui
awesome - microsoft/fluentui - Fluent UI web represents a collection of utilities, React components, and web components for building web applications. (TypeScript)

README

        # Fluent UI Web

[![Build Status](https://img.shields.io/azure-devops/build/uifabric/fabricpublic/164/master?style=flat-square)](https://dev.azure.com/uifabric/fabricpublic/_build?definitionId=164) ![GitHub contributors](https://img.shields.io/github/contributors/microsoft/fluentui?style=flat-square) ![GitHub top language](https://img.shields.io/github/languages/top/microsoft/fluentui?style=flat-square) [![Twitter Follow](https://img.shields.io/twitter/follow/fluentui?logo=x&style=flat-square)](https://twitter.com/FluentUI?ref_src=twsrc%5Etfw)

> Fluent UI React is shipping its v9 final stable release. Visit the [Fluent UI React v9 Release page on the wiki](https://github.com/microsoft/fluentui/wiki/Fluent-UI-React-v9-Release) to learn more about the upcoming release schedule.

Fluent UI web represents a collection of utilities, React components, and Web Components for building web applications.

This repo is home to 3 separate projects today. Combining Fluent UI React v9 components with Fluent UI React v8 or v0 components is possible and allows gradual migration to Fluent UI v9.

The following table will help you navigate the 3 projects and understand their differences.

|   | React Components (v9) | React (v8) | Web Components |

|---| ----- | --------------- | -------------- |

| **Overview**    | New, future-proof and forward looking | Mature | Web Component implementation of Fluent UI. |

| **Used By**     | Microsoft 365 | Office | Edge |

| **Read Me**     | [README.md](/packages/react-components/react-components/README.md) | [README.md](/packages/react/README.md)| [README.md](/packages/web-components/README.md) |

| **Changelog** | [CHANGELOG.md](/packages/react-components/react-components/CHANGELOG.md) | [CHANGELOG.md](/packages/react/CHANGELOG.md) | [CHANGELOG.md](/packages/web-components/CHANGELOG.md) |

| **Repo**        | [packages/react-components](/packages/react-components/react-components/CHANGELOG.md) | [./packages/react](/packages/react) | [./packages/web-components](/packages/web-components) |

| **Quick Start** | [Quick Start](https://react.fluentui.dev/?path=/docs/concepts-developer-quick-start--page) | [Quick Start](https://developer.microsoft.com/en-us/fluentui#/get-started/web) | [See README.md](https://github.com/microsoft/fluentui/tree/master/packages/web-components/README.md) |

| **Docs**        | [https://react.fluentui.dev/](https://react.fluentui.dev/) | [aka.ms/fluentui-react](https://aka.ms/fluentui-react) | [aka.ms/fluentui-web-components](https://aka.ms/fluentui-web-components) |

| **NPM**         | `@fluentui/react-components` | `@fluentui/react`| `@fluentui/web-components` |

| **Version**     | [![npm version](https://img.shields.io/npm/v/@fluentui/react-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/react-components) | [![npm version](https://img.shields.io/npm/v/@fluentui/react?style=flat-square)](https://www.npmjs.com/package/@fluentui/react) | [![npm version](https://img.shields.io/npm/v/@fluentui/web-components/beta?style=flat-square)](https://www.npmjs.com/package/@fluentui/web-components/v/3.0.0-beta.15) |

| **Issues**      | [![Fluent UI React Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react-components%20(v9)?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-components+%28v9%29%22) | [![Fluent UI React GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react%20(v8)?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react+(v8)%22) | [![Fluent UI Web Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/web-components?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22web-components%22) |

> Why are there two React versions? Fluent UI v8 is still widely used. We encourage you to migrate to Fluent UI v9. See the [Migration overview](https://react.fluentui.dev/?path=/docs/concepts-migration-overview--page).

## FluentUI Insights

[Fluent UI Insights](https://docs.microsoft.com/en-us/shows/fluent-ui-insights?utm_source=github) is a series that describes the design and decisions behind the Fluent UI design system.

|                                                                                                             EP01: Positioning                                                                                                             |                                                                                                           EP02: Styling                                                                                                           |                                                                                                           EP03: Griffel                                                                                                           |

| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |

|  |  |  |

|                                                                                                                          EP04: Foundational APIs                                                                                                                           |                                                                                                              EP05: Theming                                                                                                              |                                                                                                                  EP06: Accessible by default                                                                                                                  |

| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |

|  |  |  |

## Licenses

All files on the Fluent UI React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.

Usage of the fonts and icons referenced in Fluent UI React is subject to the terms of the [assets license agreement](https://aka.ms/fluentui-assets-license).

## Changelog

You can view the complete list of additions, fixes, and changes in the CHANGELOG.md file for each package.

## Looking for Office UI Fabric React?

The **Office UI Fabric React** project has evolved to **Fluent UI**.

The `office-ui-fabric-react` repo is now this repo (`fluentui` in the Microsoft organization)! The name change should not disrupt any current Fabric usage, repo clones, pull requests, or issue reporting. Links should redirect to the new location. The library formerly known as `office-ui-fabric-react` is now available as `@fluentui/react` (see above table for more information).

We have a lot in store for Fluent UI - [Read our announcement here.](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/)

## Looking for Fluent UI React Northstar?

Fluent UI React Northstar has been superseded by Fluent UI React Components v9. For more details about Fluent UI React Northstar, see its [README.md](/packages/fluentui/README.md).

---

This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [[email protected]](mailto:[email protected]) with any additional questions or comments.