DOCSEARCHbyAlgolia
Submit Docs

Fluent UI Web

repository·master·Indexed 12 days ago

https://github.com/microsoft/fluentui

A collection of utilities, React components, and Web Components for building web applications following Microsoft's design language. Supports multiple versions (v8 and v9) to accommodate both legacy systems and modern development.

Tokens
1.2M
Snippets
3.6K
Records
6.4K
Agent score
92%

What's inside Fluent UI

  2. Overview of Fluent UI Web Components

    master

    Fluent UI Web Components is a collection of lightweight, high-performance UI components designed using the Fluent design language. They are built using W3C Web Component standards, ensuring they function like native HTML elements.

    Key characteristics include:

    • Interoperability: Works with any modern JavaScript framework (React, Vue, Angular, etc.) or can be used with vanilla JavaScript.
    • Customizable: Uses a themeable design token system to allow integration of your own brand and themes.
    • Performance & Bundle Size: Optimized for speed and slimmed down to allow developers to include only the specific packages and dependencies they need.
    • Accessibility: Designed to be WCAG 2.2 compliant.
    • Standards-based: Built with zero external dependencies and adheres to web standards for custom HTML elements, encapsulation, and lifecycle management.

  3. Overview of @fluentui/tokens

    master
    The @fluentui/tokens package provides the design tokens used across the Fluent UI ecosystem. These tokens represent the core design system values, such as colors, typography, spacing, and shadows, ensuring visual consistency across different Fluent UI components and implementations.

  5. Overview of @fluentui/react-motion APIs

    master

    The library provides several ways to implement motion:

    • createPresenceComponent: For two-way enter/exit animations controlled by a visibility state.
    • createMotionComponent: For one-way animations.
    • motionTokens: Standardized duration and easing values.

    For ready-to-use components like Fade, Scale, Slide, and Collapse, you can use the @fluentui/react-motion-components-preview package.

  6. Overview of @fluentui/react-headless-components-preview

    master

    The @fluentui/react-headless-components-preview package provides unstyled, headless primitives based on Fluent UI v9. It is designed specifically for teams building their own custom design systems who want to leverage Fluent UI's logic without its default styling.

    WARNING

    This package is in preview and not production-ready. APIs may change without notice. Do not use in production.

    For most standard use cases, the recommended package is @fluentui/react-components.

  7. Overview of Fluent UI React Components

    master

    Fluent UI React Components is a unified set of UI components and utilities designed to converge previous React-based libraries (such as @fluentui/react and @fluentui/react-northstar).

    Key characteristics of the components include:

    • Customizable: Components follow Fluent styling by default but are designed for easy integration of custom branding and themes.
    • Performance: Optimized for high render performance.
    • Bundle size: Refactored to be lightweight, allowing developers to include only the specific packages and dependencies required.
    • Accessibility: Built to be WCAG 2.1 compliant and verified through testing.
    • Design to Code: Uses a Design Tokens system to ensure alignment with the Fluent Design Language.

  9. Overview of @fluentui/react-hooks

    master

    The @fluentui/react-hooks package provides a collection of helpful React hooks that are not included in the core React library. While built for Fluent UI React, they are generic and can be used in any React application.

    Key categories of hooks include:

    • State Management: useBoolean, useControllableValue, useForceUpdate.
    • Lifecycle & Effects: useMount, useOnEvent, usePrevious, useRefEffect, useIsomorphicLayoutEffect.
    • Utilities: useConst, useId, useMergedRefs, useEventCallback.

  11. Overview of Fluent UI File Type Icons

    master

    Fluent UI provides a set of document icons designed to connect your application's experience to Microsoft 365 endpoints. These icons represent user content such as files, SharePoint pages, or Sway stories.

    Key Characteristics

    • Formats: Available in both SVG and PNG formats.
    • Variations: Provided in a variety of sizes and resolutions.
    • Visual Style: These icons are typically larger and more detailed than standard command icons. In many implementations, they are intended to be replaced with an actual thumbnail preview of the content when available.

    Licensing and Compliance

    Usage of these icons is subject to the assets license agreement. Developers must review the agreement and follow the specific resolution and size guidance to ensure correct usage within their products.

  12. Overview of @fluentui/react-select

    master

    The @fluentui/react-select package provides React Select components designed for use with Fluent UI React. The Select component acts as a styled wrapper around the native HTML <select> element.

    When to use Select vs. Combobox

    • Use Select when: You do not require advanced features like filtering or virtualization. Select is recommended for better cross-platform functionality (especially on mobile devices) and superior accessibility.
    • Use Combobox when: Your use case requires filtering capabilities or handling large datasets via virtualization.