Introduction

import { Meta } from '@storybook/addon-docs/blocks'; import pkg from '@fluentui/react-components/package.json'; import { WhatsNewBoxes } from './components/WhatsNewBoxes';

<Meta title="Concepts/Introduction" /> <h1 className="fluent"> <span>Fluent UI React Components</span> <span className="fluent-version">v{pkg.version}</span> </h1>

<WhatsNewBoxes boxes={[ { image: require('../../public/lightweight.svg'), text: 'Lightweight components for smaller bundle size and faster performance.', }, { image: require('../../public/tokens.svg'), text: 'New tokens system for frictionless cohesion across OS themes.', }, { image: require('../../public/spring.svg'), text: 'New assets to level up Teams add-ins and M365 experiences.', }, ]} />

<h3 className="fluent">Overview</h3> <div className="fluent-text">

Fluent UI React Components is a set of UI components and utilities resulting from an effort to converge the set of React based component libraries in production today: @fluentui/react and @fluentui/react-northstar.

Each component is designed to adhere to the following standards:

• Customizable: Fluent-styled components by default, but easy to integrate your own brand and theme
• Performance: Optimized for render performance
• Bundle size: Refactored and slimmed down components that allow you to include the packages and dependencies you need
• Accessibility: WCAG 2.1 compliant and tested by trusted testers
• Design to Code: Stay up to date with Fluent Design Language changes via Design Tokens

</div> <h2 className="fluent">Questions?</h2>

Reach out to the Fluent UI React team on GitHub