Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Overview

Fluent UI Web

Build Status GitHub contributors GitHub top language Twitter Follow

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

This repo is home to 3 separate projects today. Mixing components between projects is not currently supported. The goal of these projects is to dedupe functionality and enable interoperability over time. For now, choose the project that best suits your needs.

The following table will help you navigate the 3 projects and understand their differences.

React React Northstar Web Components
Overview Mature, refreshing with new concepts from react-northstar. Newer, has concepts we're iterating on. Web Component implementation of Fluent UI.
Used By Office Teams Edge
Read Me README.md README.md README.md
Repo ./packages/react ./packages/fluentui/react-northstar ./packages/web-components
Quick Start Quick Start Quick Start See README.md
Docs aka.ms/fluentui-react aka.ms/fluentui-react-northstar aka.ms/fluentui-web-components
NPM @fluentui/react @fluentui/react-northstar @fluentui/web-components
Version npm version npm version npm version
Issues Fluent UI React GitHub Issues Fluent UI React Northstar GitHub Issues Fluent UI Web Components GitHub Issues

Why are there two React versions? See the FAQ on Fabric and Stardust.

Licenses

All files on the Fluent UI React GitHub repository are subject to the MIT license. Please read the License file at the root of the project.

Usage of the fonts and icons referenced in Fluent UI React is subject to the terms of the assets license agreement.

Changelog

We use GitHub Releases to manage our releases, including the changelog between every release. View a complete list of additions, fixes, and changes on the releases page.

Looking for Office UI Fabric React?

The Office UI Fabric React project has evolved to Fluent UI.

The office-ui-fabric-react repo is now this repo (fluentui in the Microsoft organization)! The name change should not disrupt any current Fabric usage, repo clones, pull requests or issue reporting. Links should redirect to the new location. The library formerly known as office-ui-fabric-react is now available as @fluentui/react (see above table for more information).

We have a lot in store for Fluent UI - Read our announcement here.


This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Issues
  • Upgrade to ts 4.0

    Upgrade to ts 4.0

    • Update change files for consistency
    • Fix some pr comments
    • fix merge
    • Change files
    • Add change files
    • update api
    • fix api-extractor warnings

    Pull request checklist

    • [ ] Addresses an existing issue: fixes #16101
    • [ ] Include a change request file using $ yarn change

    Description of changes

    (give an overview)

    Focus areas to test

    (optional)

    Area: Typescript PR: API Modified 
    opened by jdhuntington 78
  • fix(eslint-plugin): properly resolve configs for projects that use so…

    fix(eslint-plugin): properly resolve configs for projects that use so…

    …lution kind of TS config

    Pull request checklist

    • ~[ ] Addresses an existing issue: Fixes #0000~
    • [x] Include a change request file using $ yarn change

    Description of changes

    Before:

    • with current setup linting was not working in editors within /tools project
    • while debugging I found out our dynamic config provided invalid paths for file property (double slash etc)

    After:

    • linting now works consistently within /tools project from CLI and Editor
    • files are properly normalized

    Focus areas to test

    (optional)

    opened by Hotell 76
  • chore: migrate packages to single version policy

    chore: migrate packages to single version policy

    Pull request checklist

    • ~[ ] Addresses an existing issue:~
    • [x] Include a change request file using $ yarn change

    Description of changes

    (give an overview)

    Focus areas to test

    (optional)

    Area: Build System dependencies 
    opened by Hotell 75
  • fix(react-tooltip): use useIsomorphicLayoutEffect to avoid SSR warnings

    fix(react-tooltip): use useIsomorphicLayoutEffect to avoid SSR warnings

    Pull request checklist

    • [x] Addresses an existing issue: Fixes #17891
    • [x] Include a change request file using $ yarn change

    Description of changes

    This PR replaces React.useLayoutEffect with useIsomorphicLayoutEffect as it produces warnings during SSR. Also modifies ESLint preset to prevent future usages. Warnings in existing places of v8 code have been suppressed.

    See more details: https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a

    opened by layershifter 72
  • Enable the exhaustive-deps lint rule for useIsomorphicLayoutEffect

    Enable the exhaustive-deps lint rule for useIsomorphicLayoutEffect

    Pull request checklist

    • [x] Include a change request file using $ yarn change

    Description of changes

    Enable the react-hooks/exhaustive-deps lint rule for useIsomorphicLayoutEffect. Also disable the rule in the one place that it caused a failure.

    opened by behowell 72
  • Update eslint deps for compatibility with new TS version

    Update eslint deps for compatibility with new TS version

    Pull request checklist

    • [x] Addresses an existing issue: part of #18025
    • [x] Include a change request file using $ yarn change

    Description of changes

    Update eslint-related dependencies to be compatible with TS 4.1, including proper parsing for import type/export type.

    After this change, it will probably be necessary for everyone to delete their local eslint caches (yarn rimraf '{apps,packages}/*/.eslintcache' or similar) to avoid some weird false positives.

    Thanks to one or more of the updated deps (hard to say which), usage of React components is now flagged! :tada: However, this meant that a bunch more rule disables had to be added, mainly for usage of Fabric and Customizer. Where it made sense and was clearly safe, I went ahead and changed these to use ThemeProvider, but in other cases I just disabled the rule.

    There are also a few other interesting changes that I'll comment on inline.

    Related references:

    Area: Build System PR: API Modified 
    opened by ecraig12345 69
  • @fluentui/react-tooltip: warning about useLayoutEffect in SSR

    @fluentui/react-tooltip: warning about useLayoutEffect in SSR

    Actual behavior:

    Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, u
    seLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
        at TooltipProvider (@fluentui\react-tooltip\lib-commonjs\components\TooltipProvider\TooltipProvider.js:12:38)
        at div
        at ThemeProvider (@fluentui\react-theme-provider\lib-commonjs\components\ThemeProvider\ThemeProvider.js:8:36)
    

    Priorities and help requested:

    Are you willing to submit a PR to fix? Yes Requested priority: Normal Products/sites affected: (if applicable)

    Type: Bug :bug: Status: Fixed Area: SSR 
    opened by layershifter 69
  • Release version 8

    Release version 8

    Pull request checklist

    • [x] Addresses an existing issue: Part of #14692
    • [x] Include a change request file using $ yarn change

    Description of changes

    Change all version 8-related packages to non-beta versions as the final step of the major release.

    Change the repo default beachball config back to:

      disallowedChangeTypes: ['major', 'prerelease'],
      tag: 'latest',
    

    As a result of this change, most pre-release package beachball configs must be updated to maintain current versions. (Some of the current versions violate the 9.0.0-alpha convention we discussed last week, but that can be fixed separately.)

    Open questions

    • react-shared-contexts: currently at 1-beta and used by both v8 (ContextualMenu) and react-button--what to do? (PR currently adds special beachball config to keep as-is)

    Deleted package

    Due to changes in plans I don't think we need this. We can bring it back later if needed.

    • ie11-polyfills

    v8-related packages bumped to major < 8

    These packages were previously on N-beta where N > 0 and < 8. To go with prior convention I just removed the -beta suffix and kept the major version.

    • common-styles: 1
    • dom-utilities: 2
    • eslint-plugin: 1
    • monaco-editor: 1
    • react-charting: 5
    • react-icons-mdl2: 1
    • react-icons-mdl2-branded: 1
    • react-icon-provider: 1 (was previously 0.x, agreed to bump to 1)
    • react-monaco-editor: 1
    • react-window-provider: 2
    • theme: 2

    Bumped to version 8

    • api-docs
    • azure-themes
    • codemods (changed from 1 b/c seems like this should match suite version)
    • date-time-utilities
    • example-data
    • font-icons-mdl2
    • foundation-legacy
    • jest-serializer-merge-styles
    • merge-styles
    • public-docsite
    • public-docsite-resources
    • react
    • react-date-time
    • react-docsite-components
    • react-examples
    • react-experiments
    • react-file-type-icons
    • react-focus
    • react-hooks
    • scheme-utilities
    • set-version
    • style-utilities
    • test-utilities
    • theme-samples
    • utilities
    • webpack-utilities

    Everything else

    I updated other packages' beachball configs to keep their current versioning approach, so the only changes should be standard prerelease or patch bumps due to dep version updates.

    v8 release: regression or todo 
    opened by ecraig12345 68
  • Add and use shared package for website setup

    Add and use shared package for website setup

    Pull request checklist

    • [x] Addresses an existing issue: Part of #14691
    • [x] Include a change request file using $ yarn change

    Description of changes

    Best viewed with "ignore whitespace changes" (for a couple of the files)

    Previously, several pieces of setup code for the public website (developer.microsoft.com/fluentui) and its local/PR deployed versions had to be duplicated across every major version branch of Fluent/Fabric. This was not ideal since the process of making updates (such as adding a new major version) was very manual and error-prone.

    This PR adds and uses a new package @fluentui/public-docsite-setup (open to naming suggestions) to de-duplicate website setup tasks, including:

    • Loading the real site (developer.microsoft.com/fluentui): get the "manifest" file for the requested (or latest) major version, then load the current website build for that major version
    • Loading the local or PR deploy site
    • Setting up the version switcher definition (also provides related types)

    Build setup

    The build steps/configuration related to this change are as follows. (These build steps will also be added in the 5.0, 6.0, and 7.0 branches, using the @fluentui/public-docsite-setup package from master.)

    Some of this is also explained in the public-docsite-setup readme.

    | File/pipeline | What's called/done | Details | |--|--|--| | apps/public-docsite webpack configs | getLoadSiteConfig() from under @fluentui/public-docsite-setup/scripts/ | Adds a webpack config that generates dist/loadSite.js (for actual loading) and copies shared index.html to website's dist folder | | Release pipeline azure-pipelines.release.yml | yarn create-site-manifests [main package path] [CDN URL root] (script is from @fluentui/public-docsite-setup's bin) | Generates "manifest" files (under site-manifests/v8-prod.js and v8-df.js) with:
    - the URL where files from that build will be uploaded
    - the full version of @fluentui/react | | Release pipeline azure-pipelines.release.yml | "Publish artifact: fabric-website-manifests" task | Uploads the generated manifest files as a build artifact | | Website release pipeline (internal) | Upload manifest files to live location | |

    Additional manual step (as needed): since the live site actually uses bootstrap code stored in an internal repo, manually copy apps/public-docsite/homepage.htm and apps/public-docsite/dist/loadSite.js to the internal repo

    What happens at runtime

    At runtime, we start with the HTML file loading the loadSite.js bundle. (The bundle is generated by webpack from @fluentui/public-docsite-setup/src/loadSite.ts, using the getLoadSiteConfig() helper.)

    image

    The version switcher definition is read from the global by apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx, and various places in the site consume it from there.

    Here's a text version with more detail.
    1. HTML file loads loadSite.js bundle (it's generated by webpack from @fluentui/public-docsite-setup/src/loadSite.ts using getLoadSiteConfig)
    2. loadSite.js does the actual loading:
      1. Check location.hostname to determine which variant of the site this is (localhost, PR deploy, prod, df)
      2. If localhost or PR deploy:
        1. Get the full version of @fluentui/react being demoed from process.env.LOCAL_LIBRARY_VERSION (set by webpack helper)
        2. Call loadSiteInternal with that version and using the current URL as the base URL for files from that website build
      3. If it's the real site (prod/df):
        1. Determine the major version to load: use ?fabricVer=N from URL, or default to latest
        2. Load the "manifest" file for that major version: vN-df.js or vN-prod.js
        3. Call loadSiteInternal with the base URL and full library version from the manifest
      4. In loadSiteInternal:
        1. Set up the version switcher definition global (basically a bunch of IContextualMenuItems with pre-defined click handlers for reloading with a new version)
          • Note: in localhost/PR deploy builds, the click handler just displays an alert saying you can't switch versions. This is to avoid previous issues where the site implicitly loaded the live files for other versions (or even the current version), making it seem like you're testing your changes when in fact you're not.
        2. Set up global MonacoConfig for the example editor
        3. Load the root file of the actual site (minified or unminified as appropriate) from the given base URL
    3. The site is loading!
    4. Actual version switcher setup: apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx gets the version switcher definition from the global, and various places in the site consume it from there.

    Open questions

    As the PR is now, there's quite a mix of "fabric" or not in naming. Open for suggestions for what to do here. (Also okay with just going with it as-is.)

    | Thing | Name | Notes | |--|--|--| | Main website webpack bundle | fabric-site | A slight improvement over previous name fabric-sitev5. Could let this vary across branches, but it's easiest if we don't. | | Website-related artifacts in azure-pipelines.release.yml | fabric-website-whatever | Again easiest if these stay the same across branches. Inclined to leave as-is to reduce work updating the website release pipeline (and slightly reduce churn in old branches). | | Shared setup package | public-docsite-setup | Follows website naming convention from master. Will be used in other branches but that's probably fine. | | Shared bootstrap file | loadSite.ts/.js | | | Types from shared package | SiteConfig, SiteGlobals | | | Manifest creation script | create-site-manifests | | | Generated manifest files | site-manifests/vN-prod.js | | | Global defined by manifest files | __siteConfig | |

    Area: Website PR: API Modified 
    opened by ecraig12345 68
  • Cannot use different versions of office-ui-fabric-react together in Rush

    Cannot use different versions of office-ui-fabric-react together in Rush

    Environment Information

    • Package version(s): ^5.113.1, ^7.6.3, probably 6.x too.
    • Browser and OS versions: Windows

    Please provide a reproduction of the bug in a codepen:

    1. Not a codepen, but a git repo. Check out RushWithMultipleFabricVersions.
    2. Run rush install.
    3. Run rush build.

    Actual behavior:

    The build will fail with an error like:

    ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx
    ./src/index.tsx
    [tsl] ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx(8,5)
          TS2605: JSX element type 'PrimaryButton' is not a constructor function for JSX elements.
      Type 'PrimaryButton' is missing the following properties from type 'ElementClass': setState, forceUpdate, props, state, and 2 more.
    
    ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx
    ./src/index.tsx
    [tsl] ERROR in C:\Users\hegi\source\repos\test-multiple-react\packages\test-15\src\index.tsx(8,5)
          TS2607: JSX element class does not support attributes because it does not have a 'props' property.
    

    Expected behavior:

    The build should succeed. If you open /rush.json and comment out one of the projects, either test-15 or test-16 then the build will succeed on the uncommented project.

    Priorities and help requested:

    I originally opened Issue 1351 on the Rush team, but @octogonz said it was an issue with phantom dependencies.

    Are you willing to submit a PR to fix? No.

    Requested priority: Normal

    Products/sites affected: Internal development is slower since we can't use rush for projects with multiple UI fabric versions.

    Type: Bug :bug: Area: Build System Status: Fixed 
    opened by HarryGifford 64
  • DO NOT MERGE: Vanilla Extract test

    DO NOT MERGE: Vanilla Extract test

    opened by micahgodbolt 0
  • Slider with onChanged set prevents user from changing value

    Slider with onChanged set prevents user from changing value

    Environment Information

    • Package version(s): (fill this out)
    • Browser and OS versions: (fill this out if relevant)

    Please provide a reproduction of the bug in a codepen:

    Actual behavior:

    Expected behavior:

    Priorities and help requested:

    Are you willing to submit a PR to fix? (Yes, No)

    Requested priority: (Blocking, High, Normal, Low)

    Products/sites affected: (if applicable)

    Needs: Triage :mag: 
    opened by DeanCloudFlow 0
  • I need a dialog which act as a disclaimer and am adding a text to it.

    I need a dialog which act as a disclaimer and am adding a text to it.

    Describe the feature that you would like added

    const dialogContentProps = { type: DialogType.normal, title: 'Disclaimer', subText: Here is the text i want to separate in 2 paragraphs am, not able ot add <p> tag, };

    opened by shrutikhetanvakt 0
  • ComboBox hidden option property not working when multiSelect is true

    ComboBox hidden option property not working when multiSelect is true

    Environment Information

    • Package version(s): 8.34.7 and above
    • Browser and OS versions: (fill this out if relevant)

    Please provide a reproduction of the bug in a codepen:

    In the following codepen there are 2 ComboBoxes - MultiSelect Disabled and MultiSelect Enabled. The "MultiSelect Enabled" ComboBox has multiSelect to true, while the other does not. Both of these components use the same options object, and "Option A" has its hidden property set to true. When you click the caret down button to view the options on the "MultiSelect Enabled" ComboBox, Option A is still visible, while doing the same on the "MultiSelect Disabled" ComboBox does not show "Option A". https://codepen.io/sgbdev/pen/rNzaEeJ

    Actual behavior:

    ComboBox options are still appearing in the rendered list of options, despite ISelectableOption.hidden property being set to true, whenever IComboBoxProps.multiSelect is set to true.

    Expected behavior:

    ComboBox options should NOT appear in the rendered list of options, when ISelectableOption.hidden property is set to true, and IComboBoxProps.multiSelect is set to true.

    Priorities and help requested:

    Are you willing to submit a PR to fix? Yes

    Requested priority: Normal

    Products/sites affected:

    Needs: Triage :mag: 
    opened by sgbdev 0
  • chore(ability-attributes): improve schema

    chore(ability-attributes): improve schema

    Pull request checklist

    • [ ] Addresses an existing issue: Fixes #0000
    • [ ] Include a change request file using $ yarn change

    Description of changes

    (give an overview)

    Focus areas to test

    (optional)

    Fluent UI react-northstar 
    opened by jurokapsiar 5
  • Storybook: Docs mode styling (continued)

    Storybook: Docs mode styling (continued)

    👉 This PR started in #19983


    Pull request checklist

    • [x] Addresses an existing issue: #19312
    • [ ] Include a change request file using $ yarn change

    Description of changes

    Added styling for Docs mode.

    Resources

    TODO

    • [x] Make sure story descriptions have dots at the end of each sentence
    • [ ] "Open in CodeSandbox" button styling
    • [ ] Remove outer bullet point for nested lists - Ex. “Badges don’t receive focus: remove bullet point, “Badge information would be surfaced…”: keep bullet point
    • [ ] Styling of italic text
    • [ ] Styling of warnings
    • [ ] Do’s and don’ts styling
    • [ ] Styling a:hover
    • [ ] All pages are missing image in the intro section (except for Button but it’s the wrong image see Figma file for chosen images)
    • [ ] Min-width: 552px, Max-width: 672px, Left/right margin of 24px
    • [ ] Props table: The 4 column table is horizontally scrollable and it’s container fit outs outside the min width (770px wide)
    • [ ] Update vertical spacing - some spacing has changed to 12px, 16px
    • [ ] Add periods at the end of every sentence (every description) for all components
    • [ ] “Show code” in content preview, should be aligned to bottom of the box, and clipped into the box so it doesn’t show the shadow outside of the box
    • [ ] In Props Table “Show 5 more…” text should be: 14px (there’s also more speccing info on links in the Figma file)
    • [ ] Title text in “Image Layout Fit” should be the subtitle text style
    opened by levithomason 4
  • counterBadge doesn't require full set of colors from baseBadge

    counterBadge doesn't require full set of colors from baseBadge

    Environment Information

    • Package version(s): (fill this out)
    • Browser and OS versions: (fill this out if relevant)

    Please provide a reproduction of the bug in a codepen:

    https://codesandbox.io/s/92wvz?file=/example.tsx

    Actual behavior:

    counterBadge includes all color variants in it's examples - some of those examples are also incorrect. i.e. Warning uses red bgColor and darkGray foreground color

    Expected behavior:

    counterBadge should only include color variants for brand, danger, important and informative

    Priorities and help requested:

    Are you willing to submit a PR to fix? (Yes, No)

    Requested priority: (Blocking, High, Normal, Low)

    Products/sites affected: (if applicable)

    Needs: Triage :mag: 
    opened by kaylieghdavis 0
  • Incorrect icons being used in presence badges

    Incorrect icons being used in presence badges

    Environment Information

    • Package version(s): (fill this out)
    • Browser and OS versions: (fill this out if relevant)

    Please provide a reproduction of the bug in a codepen:

    https://codesandbox.io/s/o4uko?file=/example.tsx

    Actual behavior:

    Some of the icons - Offline in particular seems to be using an incorrect glyph for presence

    Expected behavior:

    Badge should be using the new Fluent icons - size 10 in this example

    Priorities and help requested:

    Are you willing to submit a PR to fix? (Yes, No)

    Requested priority: High

    Products/sites affected: (if applicable)

    Needs: Triage :mag: 
    opened by kaylieghdavis 0
  • [DatePicker] - Narrator is not working on mouse hover over next/previous month/year buttons.

    [DatePicker] - Narrator is not working on mouse hover over next/previous month/year buttons.

    Environment Information

    • Package version(s): v8.36
    • Browser and OS versions: Chrome/Edge

    Describe the issue:

    Please provide a reproduction of the issue in a codepen:

    Actual behavior:

    NVDA/Narrator is stay mute on next/previous month/year buttons

    calendar

    Expected behavior:

    NVDA/Narrator should pronounce something like "go to next year" on next/previous month/year buttons when user move mouse over those buttons

    Documentation describing expected behavior

    Needs: Triage :mag: 
    opened by chihhuan-ms 0
  • Badge spacing is inconsistent for icon only and text only badges with 1 or more characters

    Badge spacing is inconsistent for icon only and text only badges with 1 or more characters

    Environment Information

    • Package version(s): (fill this out)
    • Browser and OS versions: (fill this out if relevant)

    Please provide a reproduction of the bug in a codepen:

    https://codesandbox.io/s/k74qf?file=/example.tsx

    Actual behavior:

    Icon only and single digit text strings display wider than specified

    Expected behavior:

    Icon only and single digit text strings should have an equal height x width size so that the badge renders as a square or circle and not as a rectangle. Refer to badge spec for min-width and height sizing and spacing guidance

    Priorities and help requested:

    Are you willing to submit a PR to fix? (Yes, No)

    Requested priority: high

    Products/sites affected: (if applicable)

    Needs: Triage :mag: 
    opened by kaylieghdavis 0
Releases(@fluentui/react-button_v9.0.0-alpha.95)
Owner
Microsoft
Open source projects and samples from Microsoft
Microsoft
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.3k Oct 13, 2021
Typesafe, declarative, and composable UI engine on top of React and Focal

Typesafe, declarative, and composable UI engine on top of React and Focal

Grammarly 34 Oct 10, 2021
Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic🙌

The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React? No problem! You can still use the CSS behind each component.

elastic 3.1k Oct 12, 2021
🌲 Evergreen React UI Framework by Segment

Works out of the box. Evergreen contains a set of polished React components that work out of the box. Flexible & composable. Evergreen components are

Segment 11.2k Oct 14, 2021
Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.

Syncfusion 192 Oct 12, 2021
GraphQL API & React UI components for Elasticsearch. The easiest way to build a great search experience

Search, made easy Searchkit is an open source toolkit which helps you build a great search experience with Elasticsearch. Searchkit is a Graph QL / Re

Searchkit 4.3k Oct 12, 2021
PCUI - User interface component library for the web

This library enables the creation of reliable and visually pleasing user interfaces by providing fully styled components that you can use directly on your site. The components are useful in a wide range of use cases, from creating simple forms to building graphical user interfaces for complex web tools.

PlayCanvas 462 Oct 6, 2021
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications

Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI 72k Oct 7, 2021
EBS Design System - A React-based UI toolkit for enterprise grade applications

EBS Design System - A React-based UI toolkit for enterprise grade applications

EBS Integrator 114 Oct 9, 2021
Foundation as React components.

React + Foundation Foundation as React components. Demo https://digia.online/react-foundation-docs/ Components with Bit Motivation Foundation is both

Digia 588 Oct 8, 2021
Interactive tour to help you build your first React app using Microsoft Graph Toolkit

Microsoft Graph Toolkit React code tour This repo contains an interactive tour to help you build your first React app using Microsoft Graph Toolkit -

Microsoft Graph 5 Sep 20, 2021
The official Semantic-UI-React integration

Semantic UI React Installation & Usage See the Documentation for an introduction, usage information, and examples. Built With Amazon Publishing — the

Semantic Org 12.5k Oct 14, 2021
Toolkit for building accessible rich web apps with React

Reakit Toolkit for building accessible rich web apps with React. Explore website » Sponsors By donating $100 or more you become a sponsor and help in

Reakit 5.1k Oct 14, 2021
🏗️ React implementation for figma-plugin-ds

React Figma UI About React implementation for figma-plugin-ds by Tom Lowry Demo Playground – play with the library in Storybook Alternatives react-fig

Jakub Biesiada 14 Sep 29, 2021
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 21.1k Oct 14, 2021
React GUI-Framework based on Material UI; provides a couple of components for back-office apps (CRUD-based APIs)

Backoffice is a Framework based on Material UI, a Material Design React implementation that provides a couple of components you might want to use in a backoffice app.

React Backoffice 15 Jun 7, 2021
🌈 A UI Design Language and React UI library

Ant Design An enterprise-class UI design language and React UI library. English | Português | 简体中文 ✨ Features ?? Enterprise-class UI designed for web

Ant Design Team 74.9k Oct 14, 2021
A dApp, blockchain and crypto agnostic React UI toolkit

A dApp, blockchain and crypto agnostic React UI kit ?? ⚠️ Wet paint, you shall not use adoption on production for now. ?? Painter? Please consider joi

Paul Fasola 3 Oct 9, 2021
React components of open-source Orbit design system by Kiwi.com

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products. Orbit Mission O

Kiwi.com 1.1k Oct 9, 2021