Learn FLUENT-UI with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.