Learn Fluent-ui - 10 Code Examples & CST Typing Practice Test

Fluent UI is a React-based front-end framework developed by Microsoft that provides a set of customizable, accessible, and enterprise-ready UI components for building modern web applications.

View all 10 Fluent-ui code examples →

Fluent UI Counter Example Fluent UI Button Example Fluent UI TextField Example Fluent UI Checkbox Example Fluent UI Toggle Example Fluent UI Slider Example Fluent UI Persona Example Fluent UI Dialog Example Fluent UI Progress Example Fluent UI PersonaCard Example

Learn FLUENT-UI with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Fluent UI Counter Example

import React, { useState } from 'react';
import { DefaultButton, Stack, Text } from '@fluentui/react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);

    return (
        <Stack horizontalAlign='center' verticalAlign='center' styles={{ root: { minHeight: '100vh', background: isDark ? '#333' : '#f3f3f3', color: isDark ? '#fff' : '#000' } }}>
        <Text variant='xLarge'>Counter: {count}</Text>
        <Stack horizontal tokens={{ childrenGap: 10 }} styles={{ root: { marginTop: 20 } }}>
        <DefaultButton text='+' onClick={() => setCount(count + 1)} />
        <DefaultButton text='-' onClick={() => setCount(count - 1)} />
        <DefaultButton text='Reset' onClick={() => setCount(0)} />
        </Stack>
        <DefaultButton text='Switch Theme' onClick={() => setIsDark(!isDark)} styles={{ root: { marginTop: 20 } }} />
        </Stack>
    );
};

export default Counter;

Demonstrates a simple counter layout using Fluent UI components and React for interactivity.

Let’s Try →

Fluent UI Button Example

import React from 'react';
import { DefaultButton, PrimaryButton, Stack } from '@fluentui/react';

const ButtonExample = () => (
    <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }} tokens={{ childrenGap: 10 }}>
        <DefaultButton text='Default' />
        <PrimaryButton text='Primary' />
        <DefaultButton text='Disabled' disabled />
    </Stack>
);

export default ButtonExample;

Demonstrates different Fluent UI button styles and intents.

Let’s Try →

Fluent UI TextField Example

import React, { useState } from 'react';
import { TextField, Stack } from '@fluentui/react';

const TextFieldExample = () => {
    const [value, setValue] = useState('');
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }} tokens={{ childrenGap: 10 }}>
        <TextField label='Name' value={value} onChange={(e, v) => setValue(v || '')} />
        <div>You typed: {value}</div>
        </Stack>
    );
};

export default TextFieldExample;

Shows a simple text input using Fluent UI TextField component.

Let’s Try →

Fluent UI Checkbox Example

import React, { useState } from 'react';
import { Checkbox, Stack } from '@fluentui/react';

const CheckboxExample = () => {
    const [checked, setChecked] = useState(false);
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
        <Checkbox label='Accept Terms' checked={checked} onChange={(e, isChecked) => setChecked(!!isChecked)} />
        <div>{checked ? 'Checked' : 'Unchecked'}</div>
        </Stack>
    );
};

export default CheckboxExample;

Demonstrates checkboxes using Fluent UI Checkbox component.

Let’s Try →

Fluent UI Toggle Example

import React, { useState } from 'react';
import { Toggle, Stack } from '@fluentui/react';

const ToggleExample = () => {
    const [on, setOn] = useState(false);
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
        <Toggle label='Enable Feature' checked={on} onChange={(e, checked) => setOn(!!checked)} />
        <div>{on ? 'Feature Enabled' : 'Feature Disabled'}</div>
        </Stack>
    );
};

export default ToggleExample;

Shows a toggle switch using Fluent UI Toggle component.

Let’s Try →

Fluent UI Slider Example

import React, { useState } from 'react';
import { Slider, Stack, Text } from '@fluentui/react';

const SliderExample = () => {
    const [value, setValue] = useState(50);
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh', width: 300 } }}>
        <Slider label='Volume' min={0} max={100} step={1} value={value} onChange={setValue} showValue />
        <Text>Value: {value}</Text>
        </Stack>
    );
};

export default SliderExample;

Displays a slider input using Fluent UI Slider component.

Let’s Try →

Fluent UI Persona Example

import React from 'react';
import { Persona, Stack, PersonaSize } from '@fluentui/react';

const PersonaExample = () => (
    <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
        <Persona text='John Doe' secondaryText='Software Engineer' size={PersonaSize.size72} />
    </Stack>
);

export default PersonaExample;

Shows a user profile card using Fluent UI Persona component.

Let’s Try →

Fluent UI Dialog Example

import React, { useState } from 'react';
import { Dialog, DialogType, DialogFooter, DefaultButton, PrimaryButton, Stack } from '@fluentui/react';

const DialogExample = () => {
    const [hideDialog, setHideDialog] = useState(true);
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
        <DefaultButton text='Open Dialog' onClick={() => setHideDialog(false)} />
        <Dialog hidden={hideDialog} onDismiss={() => setHideDialog(true)} dialogContentProps={{ type: DialogType.normal, title: 'Fluent UI Dialog', subText: 'This is a dialog example.' }} modalProps={{ isBlocking: false }}>
        <DialogFooter>
        <PrimaryButton text='Close' onClick={() => setHideDialog(true)} />
        </DialogFooter>
        </Dialog>
        </Stack>
    );
};

export default DialogExample;

Demonstrates opening and closing a modal dialog using Fluent UI Dialog.

Let’s Try →

Fluent UI Progress Example

import React, { useState, useEffect } from 'react';
import { ProgressIndicator, Stack } from '@fluentui/react';

const ProgressExample = () => {
    const [progress, setProgress] = useState(0);
    useEffect(() => { const interval = setInterval(() => setProgress(p => (p >= 1 ? 0 : p + 0.1)), 1000); return () => clearInterval(interval); }, []);
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh', width: 300 } }}>
        <ProgressIndicator percentComplete={progress} />
        </Stack>
    );
};

export default ProgressExample;

Shows a progress bar using Fluent UI ProgressIndicator component.

Let’s Try →

Fluent UI PersonaCard Example

import React from 'react';
import { Persona, PersonaSize, Stack, DefaultButton } from '@fluentui/react';

const PersonaCardExample = () => (
    <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
        <Persona text='Jane Doe' secondaryText='Product Manager' size={PersonaSize.size72} />
        <Stack horizontal tokens={{ childrenGap: 10 }} styles={{ root: { marginTop: 20 } }}>
        <DefaultButton text='Message' />
        <DefaultButton text='Connect' />
        </Stack>
    </Stack>
);

export default PersonaCardExample;

Displays a user card with actions using Fluent UI PersonaCard.

Let’s Try →

Frequently Asked Questions about Fluent-ui

What is Fluent-ui?

Fluent UI is a React-based front-end framework developed by Microsoft that provides a set of customizable, accessible, and enterprise-ready UI components for building modern web applications.

What are the primary use cases for Fluent-ui?

React-based enterprise web applications. Office 365 and Microsoft Teams integrations. Admin dashboards with complex forms and data tables. Accessible and standardized UI across large organizations. Rapid prototyping with consistent design patterns

What are the strengths of Fluent-ui?

Strong integration with Microsoft ecosystem. Enterprise-grade UI components. Built-in accessibility compliance. Customizable themes and tokens. Consistent look across applications

What are the limitations of Fluent-ui?

Primarily React-only. Opinionated design aligned with Microsoft styles. Limited adoption outside Microsoft ecosystem. Bundle size can be large if not tree-shaken. Learning curve for advanced components and theming

How can I practice Fluent-ui typing speed?

CodeSpeedTest offers 10+ real Fluent-ui code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Fluent UI Counter Example

import React, { useState } from 'react';
import { DefaultButton, Stack, Text } from '@fluentui/react';

const Counter = () => {
    const [count, setCount] = useState(0);
    const [isDark, setIsDark] = useState(false);

    return (
        <Stack horizontalAlign='center' verticalAlign='center' styles={{ root: { minHeight: '100vh', background: isDark ? '#333' : '#f3f3f3', color: isDark ? '#fff' : '#000' } }}>
        <Text variant='xLarge'>Counter: {count}</Text>
        <Stack horizontal tokens={{ childrenGap: 10 }} styles={{ root: { marginTop: 20 } }}>
        <DefaultButton text='+' onClick={() => setCount(count + 1)} />
        <DefaultButton text='-' onClick={() => setCount(count - 1)} />
        <DefaultButton text='Reset' onClick={() => setCount(0)} />
        </Stack>
        <DefaultButton text='Switch Theme' onClick={() => setIsDark(!isDark)} styles={{ root: { marginTop: 20 } }} />
        </Stack>
    );
};

export default Counter;

Demonstrates a simple counter layout using Fluent UI components and React for interactivity.

Let’s Try →

Fluent UI Button Example

import React from 'react';
import { DefaultButton, PrimaryButton, Stack } from '@fluentui/react';

const ButtonExample = () => (
    <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }} tokens={{ childrenGap: 10 }}>
        <DefaultButton text='Default' />
        <PrimaryButton text='Primary' />
        <DefaultButton text='Disabled' disabled />
    </Stack>
);

export default ButtonExample;

Demonstrates different Fluent UI button styles and intents.

Let’s Try →

Fluent UI TextField Example

import React, { useState } from 'react';
import { TextField, Stack } from '@fluentui/react';

const TextFieldExample = () => {
    const [value, setValue] = useState('');
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }} tokens={{ childrenGap: 10 }}>
        <TextField label='Name' value={value} onChange={(e, v) => setValue(v || '')} />
        <div>You typed: {value}</div>
        </Stack>
    );
};

export default TextFieldExample;

Shows a simple text input using Fluent UI TextField component.

Let’s Try →

Fluent UI Checkbox Example

import React, { useState } from 'react';
import { Checkbox, Stack } from '@fluentui/react';

const CheckboxExample = () => {
    const [checked, setChecked] = useState(false);
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
        <Checkbox label='Accept Terms' checked={checked} onChange={(e, isChecked) => setChecked(!!isChecked)} />
        <div>{checked ? 'Checked' : 'Unchecked'}</div>
        </Stack>
    );
};

export default CheckboxExample;

Demonstrates checkboxes using Fluent UI Checkbox component.

Let’s Try →

Fluent UI Toggle Example

import React, { useState } from 'react';
import { Toggle, Stack } from '@fluentui/react';

const ToggleExample = () => {
    const [on, setOn] = useState(false);
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
        <Toggle label='Enable Feature' checked={on} onChange={(e, checked) => setOn(!!checked)} />
        <div>{on ? 'Feature Enabled' : 'Feature Disabled'}</div>
        </Stack>
    );
};

export default ToggleExample;

Shows a toggle switch using Fluent UI Toggle component.

Let’s Try →

Fluent UI Slider Example

import React, { useState } from 'react';
import { Slider, Stack, Text } from '@fluentui/react';

const SliderExample = () => {
    const [value, setValue] = useState(50);
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh', width: 300 } }}>
        <Slider label='Volume' min={0} max={100} step={1} value={value} onChange={setValue} showValue />
        <Text>Value: {value}</Text>
        </Stack>
    );
};

export default SliderExample;

Displays a slider input using Fluent UI Slider component.

Let’s Try →

Fluent UI Persona Example

import React from 'react';
import { Persona, Stack, PersonaSize } from '@fluentui/react';

const PersonaExample = () => (
    <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
        <Persona text='John Doe' secondaryText='Software Engineer' size={PersonaSize.size72} />
    </Stack>
);

export default PersonaExample;

Shows a user profile card using Fluent UI Persona component.

Let’s Try →

Fluent UI Dialog Example

import React, { useState } from 'react';
import { Dialog, DialogType, DialogFooter, DefaultButton, PrimaryButton, Stack } from '@fluentui/react';

const DialogExample = () => {
    const [hideDialog, setHideDialog] = useState(true);
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
        <DefaultButton text='Open Dialog' onClick={() => setHideDialog(false)} />
        <Dialog hidden={hideDialog} onDismiss={() => setHideDialog(true)} dialogContentProps={{ type: DialogType.normal, title: 'Fluent UI Dialog', subText: 'This is a dialog example.' }} modalProps={{ isBlocking: false }}>
        <DialogFooter>
        <PrimaryButton text='Close' onClick={() => setHideDialog(true)} />
        </DialogFooter>
        </Dialog>
        </Stack>
    );
};

export default DialogExample;

Demonstrates opening and closing a modal dialog using Fluent UI Dialog.

Let’s Try →

Fluent UI Progress Example

import React, { useState, useEffect } from 'react';
import { ProgressIndicator, Stack } from '@fluentui/react';

const ProgressExample = () => {
    const [progress, setProgress] = useState(0);
    useEffect(() => { const interval = setInterval(() => setProgress(p => (p >= 1 ? 0 : p + 0.1)), 1000); return () => clearInterval(interval); }, []);
    return (
        <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh', width: 300 } }}>
        <ProgressIndicator percentComplete={progress} />
        </Stack>
    );
};

export default ProgressExample;

Shows a progress bar using Fluent UI ProgressIndicator component.

Let’s Try →

Fluent UI PersonaCard Example

import React from 'react';
import { Persona, PersonaSize, Stack, DefaultButton } from '@fluentui/react';

const PersonaCardExample = () => (
    <Stack horizontalAlign='center' verticalAlign='center' verticalFill styles={{ root: { minHeight: '100vh' } }}>
        <Persona text='Jane Doe' secondaryText='Product Manager' size={PersonaSize.size72} />
        <Stack horizontal tokens={{ childrenGap: 10 }} styles={{ root: { marginTop: 20 } }}>
        <DefaultButton text='Message' />
        <DefaultButton text='Connect' />
        </Stack>
    </Stack>
);

export default PersonaCardExample;

Displays a user card with actions using Fluent UI PersonaCard.

Let’s Try →

Frequently Asked Questions about Fluent-ui

What is Fluent-ui?

Fluent UI is a React-based front-end framework developed by Microsoft that provides a set of customizable, accessible, and enterprise-ready UI components for building modern web applications.

What are the primary use cases for Fluent-ui?

What are the strengths of Fluent-ui?

Strong integration with Microsoft ecosystem. Enterprise-grade UI components. Built-in accessibility compliance. Customizable themes and tokens. Consistent look across applications

What are the limitations of Fluent-ui?

How can I practice Fluent-ui typing speed?

CodeSpeedTest offers 10+ real Fluent-ui code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.