Fluent UI Persona Example - Fluent-ui Typing CST Test
Loading…
Fluent UI Persona Example — Fluent-ui Code
Shows a user profile card using Fluent UI Persona 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;Fluent-ui Language Guide
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.
Primary Use Cases
- ▸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
Notable Features
- ▸Accessible components with ARIA roles
- ▸Themeable design system with light/dark modes
- ▸Composable React components (Button, ComboBox, DetailsList)
- ▸Integration with Fluent Design System
- ▸Responsive design utilities
Origin & Creator
Created by Microsoft (initially as Office UI Fabric) in 2016 to standardize UI for Office and enterprise apps.
Industrial Note
Fluent UI is widely used in Microsoft ecosystems, Office 365 integrations, and enterprise web applications requiring consistency with Microsoft design guidelines.