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.