Start developing

Fluent 2 provides a seamless maker experience from design to development to delivery.

Dive into the Fluent UI code libraries with these easy steps.

Pick your platform

Bring your app to your audience where and when they need it. Fluent’s cohesive design language is carried through each platform-specific Fluent UI library to ensure you can build the same great experiences across one platform or across them all.

Tooling and requirements

To build Fluent 2 experiences on React, you’ll need Fluent UI React v9. Fluent UI React is built on React and Typescript. The components are styled using CSS in JS. We use Griffel to render styles and insert CSS into the DOM when needed.

You’ll need node.js and a package manager like yarn to build and run apps using v9.

Migrating to Fluent UI React v9

Migrating from an older version of Fluent UI React? Check out our Migration topic in Storybook.

Installing Fluent UI React v9

Use your preferred package manager to install Fluent UI React as a dependency in your project.

npm install @fluentui/react-components
yarn add @fluentui/react-components

Setting up your app

Import a FluentProvider and theme at the root.
Pass the theme as a prop of the FluentProvider. This defines your app-level settings.
Import any other v9 components you’ll need to render within the FluentProvider.

import {
      FluentProvider,
      webLightTheme,
      Button
} from "@fluentui/react-components";

export default function App() {
      return (
          <FluentProvider theme={webLightTheme}>
              <Button appearance="primary">Hello Fluent UI React</Button>
          </FluentProvider>
      );
}

Ready, set, make

You’re all set! Be sure to read our component documentation to create fully accessible and delightful experiences with Fluent.

Questions or feedback? Reach out to the team on GitHub.

Tooling and requirements

To build Fluent 2 experiences on iOS, you’ll need Fluent UI Apple. Fluent UI Apple contains native UIKit and AppKit controls for implementing the Fluent design system for iOS, iPadOS, and MacOS. Fluent UI Apple is built on Swift and supports Objective-C. To get started, you’ll need:

iOS 14 or later or MacOS 10.15 or later
Xcode 14.1 or later
Swift 5.7.1 or later

Migrating to Fluent 2

With each release of Fluent UI Apple, we align more components to the Fluent 2 design language. Once a component is tokenized to align to Fluent 2, the Fluent 1 version will no longer be available.

Be sure to check the release notes to see what’s been changed or added. If you need to stick with the Fluent 1 version of an upgraded component, take the release before that component was tokenized.

Installing Fluent UI Apple

Using Swift package manager

To install FluentUI using SwiftUI, specify fluentui-apple as a dependency in your Xcode project or Package.swift file.

dependencies: [
          .package(url: "https://github.com/microsoft/fluentui-apple.git",
          .upToNextMinor(from: "X.X.X")),
]

Using CocoaPods

To install FLuent UI Apple using CocoaPods, specify Fluent UI in your Podfile. For more info, see their getting started guide.

pod 'MicrosoftFluentUI', '~> X.X.X'

Installing manually

To manually install Fluent UI Apple into an existing Xcode project, download the latest changes from the FluentUI Apple repository and move the fluentui-apple folder into your project folder.

Moving Fluent UI Apple into your project folder

Move ios/FluentUI.xcodeproj into your Xcode project
In Xcode, select your project > your target > General > Frameworks, Libraries, and Embedded Content
Add libFluentUI.a

Setting up a demo environment

To set up demo environments, select your project > your target > Build Phases > Copy Bundle Resources
Add FluentUIResources-iOS.bundle

Importing Fluent UI Apple

After installing the Fluent UI Apple library, import it to access Fluent components.

For Swift

import FluentUI

For Objective-C

#import <FluentUI/FluentUI-Switf.h>

Ready, set, make

You’re all set! Be sure to read our component documentation to create fully accessible and delightful experiences with Fluent.

Questions or feedback? Reach out to the team on GitHub.

Fluent in WinUI

To get the building blocks for crafting Windows experiences, use WinUI. These components incorporate Fluent’s design language, so you can be confident you’re building great experiences within the Fluent ecosystem.

WinUI 3 documentation