Get started with fluentui-react CDN

MIT licensed

FluentUI-React: library with pre-built components, hooks for accessible, consistent Fluent Design System apps.

Tags:
  • react
  • react-components
  • office-ui-fabric
  • microsoft

Stable version

Copied!

How to start using fluentui-react CDN


import React from 'react';
import { Button, Dialog } from 'fluentui-react.ts/lib/Button';
import { PrimaryButton } from 'fluentui-react.ts/lib/Button';
import { DialogType, DialogSizes } from 'fluentui-react.ts/lib/Dialog';

const App: React.FC = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleOpenDialog = () => {
    setIsOpen(true);
  };

  const handleCloseDialog = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <Button text="Open Dialog" onClick={handleOpenDialog} />
      <Dialog
        isOpen={isOpen}
        type={DialogType.normal}
        sizes={DialogSizes.medium}
        onDismiss={handleCloseDialog}
      >
        <Dialog.title>Dialog Title</Dialog.title>
        <Dialog.content>
          <p>This is a FluentUI dialog.</p>
        </Dialog.content>
        <Dialog.actions>
          <PrimaryButton text="Close" onClick={handleCloseDialog} />
        </Dialog.actions>
      </Dialog>
    </div>
  );
};

export default App;
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions

7.109.0 7.109.1 7.110.0 7.110.1 7.110.2 7.110.3 7.110.4 7.110.5 7.111.0 7.111.1 7.112.0 7.113.0 7.113.1 7.113.2 7.113.3 7.114.0 7.114.1 7.114.2 7.115.0 7.115.1 7.115.2 7.115.3 7.115.4 7.116.0 7.116.1 7.117.0 7.117.1 7.117.2 7.117.3 7.118.0 7.118.1 7.119.0 7.120.0 7.120.1 7.120.2 7.120.3 7.121.0 7.121.1 7.121.10 7.121.11 7.121.12 7.121.2 7.121.3 7.121.4 7.121.5 7.121.6 7.121.7 7.121.8 7.121.9 7.122.0 7.123.0 7.123.1 7.123.2 7.123.3 7.123.4 7.123.5 7.123.6 7.123.7 7.123.8 7.123.9 7.124.0 7.124.1 7.124.2 7.124.3 7.125.0 7.126.0 7.126.1 7.126.2 7.126.3 7.127.0 7.127.1 7.128.0 7.128.1 7.128.2 7.129.0 7.129.1 7.130.0 7.131.0 7.132.0 7.133.0 7.133.1 7.134.0 7.134.1 7.134.2 7.134.3 7.135.0 7.136.0 7.137.0 7.137.1 7.137.2 7.137.3 7.137.4 7.137.5 7.138.0 7.139.0 7.139.1 7.139.2 7.140.0 7.141.0 7.142.0 7.142.1 7.143.0 7.144.0 7.144.1 7.144.2 7.144.3 7.145.0 7.146.0 7.146.1 7.146.2 7.147.0 7.147.1 7.148.0 7.148.1 7.148.2 7.149.0 7.149.1 7.149.2 7.149.3 7.149.4 7.150.0 7.150.1 7.151.0 7.152.0 7.152.1 7.152.2 7.153.0 7.153.1 7.153.2 7.153.3 7.153.4 7.154.0 7.155.0 7.155.1 7.155.2 7.155.3 7.155.4 7.156.0 7.157.0 7.157.1 7.157.2 7.158.0 7.158.1 7.158.2 7.158.3 7.159.0 7.160.0 7.160.1 7.160.2 7.160.3 7.161.0 7.162.0 7.162.1 7.163.0 7.164.0 7.164.1 7.164.2 7.165.0 7.165.1 7.165.2 7.166.0 7.166.1 7.166.2 7.167.0 7.168.0 7.168.1 7.168.2 7.169.0 7.170.0 7.170.1 7.170.2 7.170.3 7.171.0 7.172.0 7.172.1 7.172.2 7.172.3 7.172.4 7.173.0 7.173.1 7.174.0 7.174.1 7.175.0 7.175.1 7.175.2 7.176.0 7.176.1 7.176.2 7.176.3 7.177.0 7.177.1 7.177.2 7.177.3 7.178.0 7.178.1 7.179.0 7.179.1 7.179.2 7.179.3 7.179.4 7.179.5 7.180.0 7.180.1 7.180.2 7.180.3 7.181.0 7.181.1 7.182.0 7.183.0 7.183.1 7.184.0 7.184.1 7.184.2 7.185.0 7.185.1 7.185.2 7.185.3 7.185.4 7.185.5 7.185.6 7.185.7 7.185.8 7.185.9 7.186.0 7.187.0 7.188.0 7.189.0 7.189.1 7.190.0 7.190.1 7.190.2 7.190.3 7.191.0 7.192.0 7.193.0 7.194.0 7.195.0 7.196.0 7.197.0 7.197.1 7.197.2 7.197.3 7.197.4 7.197.5 7.197.6 7.198.0 7.198.1 7.198.2 7.199.0 7.199.1 7.199.2 7.199.3 7.199.4 7.199.5 7.199.6 7.200.0 7.201.0 7.201.1 7.202.0 7.203.0 7.204.0 8.0.0-beta.0 8.0.0-beta.1 8.0.0-beta.10 8.0.0-beta.11 8.0.0-beta.12 8.0.0-beta.13 8.0.0-beta.14 8.0.0-beta.15 8.0.0-beta.16 8.0.0-beta.17 8.0.0-beta.18 8.0.0-beta.19 8.0.0-beta.2 8.0.0-beta.20 8.0.0-beta.21 8.0.0-beta.22 8.0.0-beta.23 8.0.0-beta.24 8.0.0-beta.25 8.0.0-beta.26 8.0.0-beta.27 8.0.0-beta.28 8.0.0-beta.29 8.0.0-beta.3 8.0.0-beta.30 8.0.0-beta.31 8.0.0-beta.32 8.0.0-beta.33 8.0.0-beta.34 8.0.0-beta.35 8.0.0-beta.36 8.0.0-beta.37 8.0.0-beta.38 8.0.0-beta.39 8.0.0-beta.4 8.0.0-beta.40 8.0.0-beta.41 8.0.0-beta.42 8.0.0-beta.43 8.0.0-beta.44 8.0.0-beta.45 8.0.0-beta.46 8.0.0-beta.47 8.0.0-beta.48 8.0.0-beta.49 8.0.0-beta.5 8.0.0-beta.50 8.0.0-beta.51 8.0.0-beta.52 8.0.0-beta.53 8.0.0-beta.54 8.0.0-beta.55 8.0.0-beta.56 8.0.0-beta.57 8.0.0-beta.58 8.0.0-beta.59 8.0.0-beta.6 8.0.0-beta.60 8.0.0-beta.61 8.0.0-beta.62 8.0.0-beta.63 8.0.0-beta.7 8.0.0-beta.8 8.0.0-beta.9 8.1.0 8.1.1 8.1.2 8.1.3 8.1.4 8.1.5 8.1.6 8.1.7 8.1.8 8.10.0 8.10.1 8.100.0 8.101.0 8.101.1 8.101.2 8.102.0 8.103.0 8.103.1 8.103.10 8.103.2 8.103.3 8.103.4 8.103.5 8.103.6 8.103.7 8.103.8 8.103.9 8.104.0 8.104.1 8.104.2 8.104.3 8.104.4 8.104.5 8.104.6 8.104.7 8.104.8 8.105.0 8.105.1 8.105.10 8.105.11 8.105.2 8.105.3 8.105.4 8.105.5 8.105.6 8.105.7 8.105.8 8.105.9 8.106.0 8.106.1 8.106.10 8.106.2 8.106.3 8.106.4 8.106.5 8.106.6 8.106.7 8.106.8 8.106.9 8.107.0 8.107.1 8.107.2 8.107.3 8.107.4 8.107.5 8.107.6 8.108.0 8.108.1 8.108.2 8.108.3 8.109.0 8.109.1 8.109.10 8.109.11 8.109.2 8.109.3 8.109.4 8.109.5 8.109.6 8.109.7 8.109.8 8.109.9 8.11.0 8.11.1 8.11.2 8.110.0 8.110.1 8.110.10 8.110.11 8.110.12 8.110.13 8.110.14 8.110.15 8.110.2 8.110.3 8.110.4 8.110.5 8.110.6 8.110.7 8.110.8 8.110.9 8.111.0 8.111.1 8.111.2 8.111.3 8.111.4 8.112.0 8.112.1 8.112.2 8.112.3 8.112.4 8.112.5 8.112.6 8.112.7 8.112.8 8.112.9 8.113.0 8.113.1 8.114.0 8.114.1 8.114.2 8.114.3 8.114.4 8.115.0 8.115.1 8.115.2 8.115.3 8.115.4 8.115.5 8.115.6 8.115.7 8.116.0 8.117.0 8.117.1 8.117.2 8.117.3 8.117.4 8.117.5 8.117.6 8.117.7 8.117.8 8.118.0 8.118.1 8.118.10 8.118.2 8.118.3 8.118.4 8.118.5 8.118.6 8.118.7 8.118.8 8.118.9 8.119.0 8.119.1 8.119.2 *** 8.119.3 8.12.0 8.12.1 8.13.0 8.13.1 8.14.0 8.14.1 8.14.10 8.14.11 8.14.12 8.14.13 8.14.14 8.14.15 8.14.2 8.14.3 8.14.4 8.14.5 8.14.6 8.14.7 8.14.8 8.14.9 8.15.0 8.15.1 8.16.0 8.17.0 8.17.1 8.17.2 8.17.3 8.17.4 8.18.0 8.19.0 8.19.1 8.2.0 8.2.1 8.20.0 8.20.1 8.20.2 8.21.0 8.21.1 8.22.0 8.22.1 8.22.2 8.22.3 8.23.0 8.23.1 8.23.10 8.23.2 8.23.3 8.23.4 8.23.5 8.23.6 8.23.7 8.23.8 8.23.9 8.24.0 8.25.0 8.26.0 8.26.1 8.26.2 8.27.0 8.27.1 8.27.2 8.28.0 8.28.1 8.28.2 8.29.0 8.29.1 8.29.2 8.3.0 8.3.1 8.3.2 8.30.0 8.30.1 8.30.2 8.30.3 8.30.4 8.31.0 8.32.0 8.33.0 8.34.0 8.34.1 8.34.2 8.34.3 8.34.4 8.34.5 8.34.6 8.34.7 8.35.0 8.35.1 8.35.2 8.36.0 8.36.1 8.36.2 8.36.3 8.36.4 8.36.5 8.37.0 8.37.1 8.37.2 8.37.3 8.37.4 8.37.5 8.37.6 8.38.0 8.39.0 8.4.0 8.40.0 8.41.0 8.41.1 8.41.2 8.41.3 8.41.4 8.42.0 8.42.1 8.42.2 8.42.3 8.42.4 8.42.5 8.43.0 8.44.0 8.45.0 8.46.0 8.46.1 8.46.2 8.46.3 8.47.0 8.47.1 8.47.2 8.47.3 8.48.0 8.48.1 8.49.0 8.49.1 8.49.2 8.49.3 8.49.4 8.49.5 8.49.6 8.49.7 8.5.0 8.5.1 8.50.0 8.50.1 8.51.0 8.51.1 8.52.0 8.52.1 8.52.2 8.52.3 8.53.0 8.54.0 8.55.0 8.55.1 8.55.2 8.55.3 8.56.0 8.56.1 8.56.2 8.56.3 8.57.0 8.57.1 8.58.0 8.59.0 8.6.0 8.6.1 8.60.0 8.60.1 8.60.2 8.60.3 8.60.4 8.61.0 8.61.1 8.61.2 8.62.0 8.62.1 8.62.2 8.62.3 8.62.4 8.63.0 8.63.1 8.64.0 8.64.1 8.64.2 8.64.3 8.64.4 8.65.0 8.65.1 8.66.0 8.66.1 8.66.2 8.67.0 8.67.1 8.67.2 8.67.3 8.67.4 8.68.0 8.68.1 8.68.2 8.68.3 8.68.4 8.69.0 8.7.0 8.7.1 8.70.0 8.71.0 8.71.1 8.72.0 8.72.1 8.72.2 8.72.3 8.73.0 8.74.0 8.75.0 8.75.1 8.76.0 8.76.1 8.77.0 8.77.1 8.77.2 8.77.3 8.78.0 8.78.1 8.79.0 8.8.0 8.80.0 8.81.0 8.81.1 8.82.0 8.82.1 8.82.2 8.83.0 8.83.1 8.84.0 8.85.0 8.85.1 8.86.0 8.86.1 8.86.2 8.86.3 8.86.4 8.87.0 8.87.1 8.87.2 8.88.0 8.89.0 8.9.0 8.9.1 8.9.2 8.9.3 8.9.4 8.90.0 8.90.1 8.90.2 8.91.0 8.91.1 8.92.0 8.92.1 8.93.0 8.93.1 8.94.0 8.94.1 8.94.2 8.94.3 8.94.4 8.95.0 8.95.1 8.96.0 8.96.1 8.96.2 8.96.3 8.97.0 8.97.1 8.97.2 8.98.0 8.98.1 8.98.2 8.98.3 8.98.4 8.98.5 8.98.6 8.98.7 8.98.8 8.99.0 8.99.1 8.99.2 8.99.3