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

🎉 🎉 🎉 Version 8 of @fluentui/react is now available on npm! 🎉 🎉 🎉

See the release notes for more info, and please file an issue if you have any problems.

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
  • 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
  • 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
  • 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
  • Add hard coded PR deploy URL to allow for local testing

    Add hard coded PR deploy URL to allow for local testing

    urlForMaster was dependent on process.env.DEPLOYHOST which meant that perf-test could not be ran locally without manually adding in the URL. Now running perf-test locally will compare the local target perf against the deployed baseline perf.

    Area: Build System 
    opened by micahgodbolt 4
  • Fixing the suggestions automatically pop ing out using arrow keys

    Fixing the suggestions automatically pop ing out using arrow keys

    Pull request checklist

    • [ ] Addresses an existing issue: Fixes #19948

    Description of changes

    Current implementation was adding a focus zone over a base picker, but if you have a focus zone over a picker then you can't navigate the suggestions using the arrow keys.

    Removing the focus zone over the base picker fix the issue. This have been fixed the same way in the latest fluent ui package.

    Focus areas to test

    Accessiblity

    Component: Pickers Fabric 7 needs cherry-pick 
    opened by mavarsh 2
  • User/v pkoganti/testing

    User/v pkoganti/testing

    Pull request checklist

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

    Description of changes

    (give an overview)

    Focus areas to test

    (optional)

    Package: charting 
    opened by Prudhvikoganti 5
  • Adding overflowBehaviour='menu' to Pivot component causes accessibility checks to fail

    Adding overflowBehaviour='menu' to Pivot component causes accessibility checks to fail

    Environment Information

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

    Describe the issue:

    Adding overflowBehaviour='menu' to Pivot component causes accessibility checks to fail. The checks fail because the overflow button that appears lacks an aria-label, button-name or aria-description for accessibility compliance.

    Please provide a reproduction of the issue in a codepen:

    https://codepen.io/EvansAboge/pen/LYjVjzG?editors=1010

    Actual behavior:

    The overflowBehaviour works very well on Pivot components and makes the pivot items very responsive. However, the button lacks a button-name or aria-label or aria-description for accessibility compliance

    Expected behavior:

    The overflowBehaviour should also include a prop that supplies a button-name, aria-label or aria-description to the overflow button.

    Needs: Triage :mag: 
    opened by Onokaev 0
  • Add aria-labelledby prop to Slider component

    Add aria-labelledby prop to Slider component

    Pull request checklist

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

    Description of changes

    This PR adds a new prop to the <Slider> component called ariaLabelledBy.

    This will allow users to generate their own label and link it to the <Slider> component by passing attribute aria-labelledby, which will then be reassigned to ariaLabelledBy.

    Focus areas to test

    (optional)

    Area: Accessibility Component: Slider 
    opened by bytrangle 3
  • How to get a coustom data from a Button control?

    How to get a coustom data from a Button control?

    I have three Button: <PrimaryButton text="category a" onClick={this.edit_category} data-id={12} /> <PrimaryButton text="category b" onClick={this.edit_category} data-id={13} /> <PrimaryButton text="category c" onClick={this.edit_category} data-id={14} />

    how to get the id attribute data?

    Needs: Triage :mag: 
    opened by duqingnian 1
  • (web-components): remove lodash-es dependency and add missing fast-web-utilities package

    (web-components): remove lodash-es dependency and add missing fast-web-utilities package

    Pull request checklist

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

    Description of changes

    Earlier today the FAST team merged a contribution which removed lodash-es as a necessary peer dependency in favor of smaller local functions. This PR resolves removing lodash-es as a dependency of the Fluent UI Web Components. The PR also adds an existing but undeclared dependency for the fast-web-utilities package.

    Focus areas to test

    N/A

    web-components 
    opened by chrisdholt 5
  • 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
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 72.3k Oct 17, 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
Contrast Design Bootstrap Free : Elegant UI Kit and reusable components for building mobile-first, responsive websites and web apps

Contrast Bootstrap React Elegant UI Kit and reusable components for building mobile-first, responsive webistes and web apps Install npm install --save

Devwares 22 Sep 22, 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 15 Oct 15, 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