Fluent UI

import { Button, Input, Stack, Text } from '@fluentui/react-components';
import { FluentProvider, webLightTheme } from '@fluentui/react-components';

function App() {
  return (
    <FluentProvider theme={webLightTheme}>
      <Stack tokens={{ childrenGap: 10 }} style={{ padding: 20 }}>
        <Text variant="xxLarge">مرحباً بالعالم</Text>
        <Input placeholder="أدخل النص" />
        <Stack horizontal tokens={{ childrenGap: 10 }}>
          <Button appearance="primary">زر رئيسي</Button>
          <Button appearance="secondary">زر ثانوي</Button>
          <Button appearance="outline">زر محدد</Button>
        </Stack>
      </Stack>
    </FluentProvider>
  );
}

// Dialog
import { Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions } from '@fluentui/react-components';

function MyDialog() {
  return (
    <Dialog>
      <DialogTrigger disableButtonEnhancement>
        <Button>افتح</Button>
      </DialogTrigger>
      <DialogSurface>
        <DialogBody>
          <DialogTitle>عنوان</DialogTitle>
          <DialogContent>محتوى</DialogContent>
          <DialogActions>
            <DialogTrigger disableButtonEnhancement>
              <Button appearance="secondary">إغلاق</Button>
            </DialogTrigger>
            <Button appearance="primary">موافق</Button>
          </DialogActions>
        </DialogBody>
      </DialogSurface>
    </Dialog>
  );
}