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 logo


Quickly build beautiful React apps. 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.

license npm latest package npm next package npm downloads CircleCI Coverage Status Follow on Twitter Dependabot Status Average time to resolve an issue Crowdin Open Collective backers and sponsors


Material-UI is available as an npm package.

Stable channel v4

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

โš ๏ธ All ongoing work has moved to v5. The development of v4 is limited to important bug fixes, security patches and easing the upgrade path to v5.

Alpha channel v5

// with npm
npm install @material-ui/[email protected] @emotion/react @emotion/styled

// with yarn
yarn add @material-ui/[email protected] @emotion/react @emotion/styled
Older versions

Please note that @next will only point to pre-releases; to get the latest stable release use @latest instead.

Who sponsors Material-UI?

Diamond ๐Ÿ’Ž

octopus doit-intl

Diamond Sponsors are those who have pledged $1,500/month or more to Material-UI.

Gold ๐Ÿ†

via Patreon

tidelift bitsrc

via OpenCollective

call-em-all canadacasino hoodiebees



Gold Sponsors are those who have pledged $500/month or more to Material-UI.

There is more!

See the full list of our backers.


Here is a quick example to get you started, it's all you need:

import * as React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';

function App() {
  return <Button variant="contained">Hello World</Button>;

ReactDOM.render(<App />, document.querySelector('#app'));

Yes, it's really all you need to get started as you can see in this live and interactive demo:

Edit Button


For how-to questions and other non-issues, please use StackOverflow instead of GitHub issues. There is a StackOverflow tag called "material-ui" that you can use to tag your questions.


Are you looking for an example project to get started? We host some.


Check out our documentation website.

Premium Themes

You can find complete templates & themes in the Material-UI store.


Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Material-UI.

Notice that contributions go far beyond pull requests and commits. Although we love giving you the opportunity to put your stamp on Material-UI, we also are thrilled to receive a variety of other contributions.


If you have recently updated, please read the changelog for details of what has changed.


The future plans and high priority features and enhancements can be found in the roadmap file.


This project is licensed under the terms of the MIT license.

Sponsoring services

These great services sponsor Material-UI's core infrastructure:


GitHub allows us to host the Git repository.


CircleCI allows us to run the test suite.


Netlify allows us to distribute the documentation.


CrowdIn allows us to translate the documentation.


BrowserStack allows us to test in real browsers.


CodeCov allows us to monitor the test coverage.

  • [RFC] v5 styling solution ๐Ÿ’…

    [RFC] v5 styling solution ๐Ÿ’…

    This RFC is a proposal for changing the styling solution of Material-UI in v5.

    TL:DR; the core team proposes we go with emotion

    What's the problem?

    • Maintaining & developing a great styling engine takes a considerable amount of time. We have experienced it first hand. Over the last 12 months, we have preferred to invest time on our core value proposition: the UI components, rather than improve the style engine. Working on it has a high opportunity cost.
    • We have been facing issues with supporting dynamic styles for the components. The performance of our custom dynamic styles implementation (based on props) isn't great (see the performance benchmarks below). This is seriously limiting the quality of the Developer Experience we can provide. It's a blocker for improving our API around customizability or ease of writing styles. For instance, it will unlock: style utils props, color variant, and custom variant.
    • The React community, at large, hasn't voted for using JSS at scale (JSS is great and still used). 3 years ago we bet on the best option available. We have to recognize better options are available now. We can move faster and unlock better DX/UX by building on top of a more popular, existing, styling solution.
    • Many developers use styled-components to override Material-UI's styles. End-users find themselves with two CSS-in-JS libraries in their bundle. Not great. It would be better if we could offer different adapters for different CSS-in-JS libraries. (Potential problems: we may need to re-write the core styles to match the syntax of the engine used ๐Ÿคทโ€โ™€๏ธ)

    What are the requirements?

    Whatever styling engine we choose to go with we have to consider the following factors:

    • performance: the faster the better but we are willing to trade some performance to improve the DX.
    • bundle size: below our current 14.3 kB gzipped would be great.
    • support concurrent mode: @material-ui/styles has partial support as I'm writing.
    • support SSR
    • simple customization
    • allow dynamic styling
    • good community size
    • theming
    • flat specificity
    • RTL
    • TypeScript

    It would be nice if it can support the following:

    • zero-config from the perspective of Material-UI consumers
    • streaming
    • source map

    What are our options?

    • styled-components
    • emotion
    • JSS (currently wrapped in material-ui)
    • styletron
    • Aphrodite
    • fela
    • else?



    Here are benchmarks with dynamic styles of several popular libraries (note the Material-UI v4 only use static styles which have good performance):

    PR for reference:

    Based on the performance, I think that we should eliminate: JSS (currently wrapped in @material-ui/styles), styletron, and fela. That would leave us with:

    • styled-components
    • emotion
    • Aphrodite
    • ~~JSS~~
    • react-styletron
    • ~~fela~~

    Dynamic props

    Based on the open issues, it seems that Aphrodite doesn't support dynamic props: which in my opinion means that we should drop that one from our options too, leaving us with:

    • styled-components
    • emotion
    • ~~Aphrodite~~
    • react-styletron


    While styled-components and emotion are both libraries are pretty popular, react-styletron at the time or writing is much behind with around 12500 downloads per week (this in my opinion is a strong reason why we should eliminate it, as if we decide to go with it, the community will again need to have two different styling engine in their apps).

    Here is the list rang by the number of Weekly downloads at the time of writing:

    Note that storybook has a dependency on emotion. It significantly skews the stats.

    • styled-components
    • emotion
    • ~~react-styletron~~

    Support concurrent mode

    • emotion: YES. Since v10 it is strict mode compatible based on their announcement post. I have tested it on a simple project that works as expected.
    • styled-components: Partial. There is at least one bug with global styles in strict mode.


    • emotion: YES. Also has an interesting no configuration support for prototyping only.
    • styled-components: YES.


    • styled-components: 30.6k
    • emotion: 11.4k
    • ~~JSS~~: 5.9k

    Trafic on the documentation

    SimilarWeb estimated sessions/month:

    • ~476K/month (for comparison)
    • ~239K/month
    • ~59K/month
    • <30k/month (for comparison)

    Users feedback

    Based on the survey, 53.8% percent are using the Material-UI styles (JSS), which is not a surprise as it is the engine coming from Material-UI. However, we can see that 20.4% percent are already using styled-components, which is a big number considering that we don't have direct support for it. Emotion is used by around 1.9% percent of the developers currently based on the survey.

    Having these numbers we want to push with better support for styled-components, so this is something we should consider.

    Browser support

    • emotion: modern evergreen browsers + IE11
    • styled-components: not documented for v5, but the previous versions support the following

    Bundle size

    What's the best option?

    Default engine

    Even if we decide to support multiple engines, we would still need to advocate for one by default and have one documented in the demos.



    • Has the biggest community, people love to use it.
    • Performance starting from v5 is good.


    • It will mean that all components styles need to be created using the styled API, which means for developers they will always have wrapper components if they need to re-style.
    • Lack of full concurrent support, which may create blockers down the road.



    • Relatively large community, growing.
    • Good performance.
    • Concurrent mode + SSR would be possible out of the box.
    • The CSS prop can be useful for overrides.
    • Source map support.
    • A bit smaller.


    Support multiple

    We may try to support multiple CSS-in-JS solutions, by providing our in house adapters for them. Some things that we need to consider is that, that we may have duplicate work on the styles, as the syntax is different between them (at least jss compared to styled-components/emotion). We will reuse the theme object no matter what solution we will pick up.

    The less involved support for this may come from the usage of the styled, as people may do some webpack config to decide which one to use - (this is just something to consider).

    Additional comments

    Deterministic classnames on the components that can be targeted for custom styles

    Regarding how the classes look and how developers may target them, I want to show a comparison of what we currently have and how the problem can be solved with the new approach.

    As an example, I will take the Slider component. Here is currently how the generated DOM look like:

    Each of the classes has a very well descriptive semantic and people can use these classes for overriding the styles of the component.

    On the other hand, emotion, styled-components or any other similar library will create some hash as a class name. For us to solve this and offer the developers the same functionality for targeting classes, each of the components will add classes that can be targeted by the developers based on the props.

    This would mean that apart from the classes generated by emotion, each component will still have the classes that we had previously, like MuiSlider-root & MuiSlider-colorPrimary, the only difference would be that this classes will now be used purely as selectors, rather than defining the styles for the components. This could be implemented like a hook - useSliderClasses


    No matter which solution we would choose, we would use the styled API, which is supported by the two of them. This will allow us down the road to have easier support for styled + unstyled components (probably with webpack aliases, like for using preact).

    After we investigated the two options we had in the end, the core team proposes we go with emotion. Some key elements:

    A small migration cost between styled-components and emotion

    Developers already using styled-components should be able to use emotion with almost no effort.

    There are different ways for adding overrides other than wrapper components

    The support of cx + css from emotion can be beneficial for developers to use it as an alternative for adding style overrides if they don't want to create wrapper components.

    Concurrent mode is for sure supported :+1:

    Kudos to @ryancogswell for doing a deeper investigation on this topic. So far we did not find anything in @emotion's code that would give us concern that concurrent mode wouldn't work. We were also looking into createGlobalStyle from styled-components as a comparison to emotion's Global component. It is doing most of its work during render (inherently problematic for Strict/Concurrent Mode) and just using useEffect for removing styles in its cleanup function. createGlobalStyle needs a complete rewrite before it will be usable in concurrent mode -- it isn't OK for it to add styles during render if that render is never committed. It looks like someone has tried rewriting it with some further changes in the last month, so we will need to follow this progress.

    How is the specificity handled

    Emotion's docs recommend doing composition of CSS into a single class rather than trying to leverage styles from multiple class names. In v5, our existing global class names would be applied without any styles attached to them. The composition of emotion-styled components automatically combines the styles into a single class. This potentially gets rid of these stylesheet order issues at least internal to the styles defined by Material-UI, because every component's styles are driven by a single class name :+1:. So we would have the global class names (for developers to target in various ways for customizations) and then a single generated (by emotion) class name per element that would consolidate all the CSS sources flowing into it. Specificity is then handled by emotion based on the order of composition. All compositions using emotion (whether render-time or definition-time composition) results in a single class on the element. styled-components does NOT work this way concerning render-time composition (definition-time composition does get combined into a single class). The same composition in styled-components results in multiple classes applied to the same element and the specificity does not work as I would have intended.


    What do you think about it?

    opened by mnajdova 222
  • [RFC] Migrate to styled-components

    [RFC] Migrate to styled-components

    Can we switch to styled-components?

    Outdated comparison

    It has many advantages against JSS Here comparison table, and next version is even going to avoid SSR styles re-render!

    Features | styled-components | react-jss ------------ | ------------- | ------------- No build requirements | โœ…| โœ… Small and lightweight | โœ… | โœ… Supports global CSS | โœ… | โœ… Supports entirety of CSS | โœ… | โœ… Colocated | โœ… | โœ… Isolated | โœ… | โœ… Doesnโ€™t break inline styles | โœ… |โœ… Easy to override | โœ… | โœ… Theming | โœ… | โœ… Server side rendering | โœ… | โœ… No wrapper components | โŒ | โœ… ReactNative support | โœ… | โŒ

    Legend: โœ… = Yes, โŒ = No, ๐Ÿ˜• = Kinda, refer to notes or parentheses

    enhancement discussion 
    opened by kybarg 167
  • Support React Native

    Support React Native

    Absolutely beautiful library.

    Any plans to port it to React-Native in the future?


    opened by chadobado 119
  • [Core] There should be a more sophisticated styling solution.

    [Core] There should be a more sophisticated styling solution.

    @callemall/material-ui please leave some input here when you can ๐Ÿ‘

    We need to decide on a styling solution for 0.16.0 that will help address long standing issues. Outside of performance issues, there are hacks and props all over the place to make up for the fact that we are missing out on some of the powerful features in CSS that cannot be used with inline styles -- pseudo classes, media queries (without matchmedia), etc.

    From what I understand, the general consensus is that we want a JS style solution that has the capability to write styles to an actual stylesheet in the DOM.

    Here are a few of the maintained solutions that do this:

    Here are some points we need to consider when implementing the new solution (IMO):

    1. Does it align with our goals? (lightly touched on above)
    2. Implementing media queries that follow the high level breakpoints detailed in the spec that can be easily used in components with a stylesheet mixin (or whatever the implementation we use calls them). If we're overhauling the style implementation, it is the opportune moment to plant the seed for much better responsive UI support in this library. It would be even better if these tools are available in userland too ๐Ÿ‘
    3. Should we create layout helper components and/or mixins to help unify flexbox layout implementations across the lib?
    4. Does theming needs to change to maximize best use of the new solution? While theming is one component of consistent styling, we should also look into creating variables for many of the common material styles such as global keylines/font sizes/spacing/margins/etc. I strongly recommend we improve our typography consistency by creating predefined type styles matching the material-ui typography guide, and try match up component elements like titles etc as best possible to these global type style variables as a default.
    5. ~~If using a library as large as react-look, try and see how we can import modules for a minimal build size. The full build size is 16kb gzipped which is fairly large. It would be great if we can minimize the impact on build size.~~ I realized that 9kb of that is which we already use... ๐Ÿ˜„
    performance discussion umbrella 
    opened by nathanmarks 100
  • Refactor CSS into Javascript

    Refactor CSS into Javascript

    Move component CSS into Javascript to remove the need for adding CSS/Less files to projects.

    Suggest comes from seeing this slideshow from @vjeux

    opened by aranw 95
  • Improve Material-UI performance

    Improve Material-UI performance

    First, thank you very much for this awesome component library! It's great!

    I added a drawer in my new app. Mostly, I copypasted drawer example. Just for PoC I multiplied

            <Divider />


    After that it feels very slow, especially on mobile device (nexus 4, cordova with crosswalk 20). I use dev mode, but prod mode doesn't speed up much.

    Through react dev tools I noticed that components in mailFolderListItems rendered on every link click in react-router or even menu open. It takes sometime up to 50-60ms to rerender ONE {mailFolderListItems}. I use

    const modalProps = {
    	keepMounted: true, // Better open performance on mobile.

    To eliminate uncertainty with other app components, I converted mailFolderListItems to Component and disable rerendering:

    class MailFolderListItems extends React.Component<{}, {}> {
    	shouldComponentUpdate() {
    		return false;
    	render() {
    		return (
    				<Link to={Routes.Startpage.path}>
    							<InboxIcon />
    				<Divider />
    				<MailFolderListItems />

    After that this part feels OK.

    I found . I suggest to revisit it. Optimizing shouldComponentUpdate is fundamental and most important step to gain performance. PureComponent is just most common shortcut.

    Furthermore, I noticed that very much time (1-2ms and more for EVERY material-ui component) is spended in WithStyles.

    • [x] I have searched the issues of this repository and believe that this is not a duplicate.

    Expected Behavior

    I'm expecting to get most of possible react performance for this great library.

    Current Behavior

    The app get slower with every material-ui component.

    Steps to Reproduce (for bugs)

    I don't provide reproducing example yet, because I just copypasted from component demo page, but if needed I can provide codesandbox demo. For browser it's noticeable, if browser slowed down by factor >=5x in performance setting.

    Your Environment

    | Tech | Version | |--------------|---------| | Material-UI | 1.0.0-beta.38 | | Material-UI Icons | 1.0.0-beta.36 | | React | 16.2.0 | | browser | cordova crosswalk 20 (equals android chrome 50) |

    performance discussion 
    opened by Bessonov 93
  • [RFC] Material-UI v5 ๐Ÿš€

    [RFC] Material-UI v5 ๐Ÿš€


    Material-UI v4 was released 10 months ago, per our release schedule. It's time to plan for v5. Our GitHub milestone has a due date for October 1st 2020, and while I doubt we will release in time, planning 6 months ahead seems relevant.

    Developers made it clear in the past that they don't enjoy breaking changes. This is feedback we took into consideration when designing our versioning strategy, and for each minor/patch releases. The result was to commit to a minimum of 1 year between each major release.

    At the same time, the v0 to v1 upgrade was a major breaking change (a rewrite with a brand new API) and yet it was successful. I think that we should be willing (taking the risk) to make bold changes, as long as they fit in the direction we see the community going in the long term (with Material-UI empowering it).

    Structural changes

    1. Unstyled components

    Similar to Angular Material CDK components (Component Development Kit) #6218.

    In practice, it could be a new hook version of all the components, something we have started to experiment with the useAutocomplete and usePagination in the lab.

    The problem:

    • The React OSS component community is fragmented. You will find both standalone components for a specific problem, as well as and a growing number of component libraries, with a wide range of API consistency, a11y, bug density, performance, bundle size, quality, and support.
    • Styling solution usage is fragmented. We can get a glimpse of this by looking at the CodeSandbox usage stats for the style interoperability page:
      • plain css: 34%
      • styled components: 30%
      • global css: 18%
      • css modules: 12%
      • emotion: 5%
    • Developers and designers use different design systems. Material Design doesn't have a monopoly.
    • How can we help with the unstyled story of notistack, raised by @iamhosseindhv?

    Why this solution?:

    • This will enable Material-UI to stay relevant in the long term. This is a cornerstone of our strapline. It will shift the developer's perception, that Material-UI is, at its core, about providing material to build UIs.

    React components for faster and easier web development. Build your own design system, or start with Material Design.

    • Talking with backend and fullstack users, we know that they are craving for a single component store rather than having to deal with a wide range of dependencies. We could expect the same from front-end developers.
    • This new "offering" should better resonate with front-end developers. We could expect to gain more and higher quality contributions from the front-end community thanks to this shift.
    • Based of our current trust, usage, and exposure in the React community, we are well-positioned to gain usage with this new "offering".
    • Maintaining standalone components is rarely sustainable. I have seen too many projects left abandoned. But by aggregating them in Material-UI, it helps our flywheel. It can incentivize new maintainers to work on the OSS. It can also strengthen our current monetization channels and invest resources back into the OSS components.
    • It's important to support different style engines and design systems.

    2. Full strict mode support

    #18018, #13394

    The problem:

    • While developers can set up strict mode in their app to identify incorrect patterns, Material-UI prevents them from keeping this mode enable on a daily basis, as there would be too much noise in the console. We have, for example, disabled it for the Material-UI documentation.

    Why this solution?

    • It's the future.
    • It helps with the unstyled story.

    3. Migrate to styled-components

    #6115, #16947

    The problem:

    • We have left important issues related to our styling solution unhandled over the last few months: streaming, strict mode, performance, CSS template support, style functions, class name mismatch, etc.
    • We need to support dynamic props, this is important for the features we want to implement on the components.
    • JSS popularity didn't stick with the front-end community.

    Why this solution?

    • A migration to styled-components is our most requested (upvoted) issue to date.
    • We want to remove the need for the majority of developers to bundle two CSS-in-JS runtimes.

    It could be interesting to provide a choice between different style engines. v5's users would be able to replace @material-ui/styles with react-jss.

    4. Enable the use of @material-ui/system's props in the core components


    The problem

    • Naming things is hard.
    • Indirections can be inefficient.

    Why this solution?

    This is mainly driven by the positive feedback Tailwind and styled-system have had recently in the community. I enjoy the pattern a lot for one-off layout problems. It's frustrating that only the Box component supports it. I think that it should also cover #6140.

    <Typography textAlign={{ xs: 'left', md: 'center' }} />
    <Button mt={3}>

    Regarding the implementation and final API, we could still reconsider the tradeoff (relying on global class names rather than style functions).

    5. Allow the use of dynamic theme variants and colors

    #15573 & #13875. Allow breakpoints customization #11649.

    I was wondering about revamping the theme structure to match System-UI Theme Specification but we don't see a clear win so far.

    Material-UI's theme structure, on its own, is a specification, the structure is set. Assuming that Material-UI aims to support a wide range of components (unstyled or not), matching this spec, not just Material Design, I fail to see a strong advantage a different constraint could yield.

    On the cost side, using theme-specification would require to drop some of the features of our theme and require breaking changes. The benefit isn't obvious, but it's something to consider.

    Regarding styled-system. I think that we should re-evaluate if we still need @material-ui/system.

    Material Design

    โœ… Checklist
    • [x] [Checkbox] Make color="primary" the default (#26002)
    • [x] [Paper] Dark mode brighening based on elevation #18309 (#25522)
    • [x] [Snackbar] Dark mode color #24438
    • [x] [Tabs] Improve color management #24286
    • [x] [Switch] Make color="primary" the default (BC: #26182)
    • [x] [Radio] Make color="primary" the default (BC #26180)
    • [x] [Tabs] Remove min-width media query #15824 (BC: #26458)
    • [x] [Select] Update to match the specification #18493 (BC: #26200)
    • [x] [Dialog] Flatten DialogTitle DOM structure #19696 (BC: #26323)
    • [x] ~[Button] Reduce the duration of the transition from 250ms to 200ms I don't think this is worth doing now - edited by @siriwatknp
    • [x] ~[Autocomplete] Consistency with select #18136~ [move to v5.1]
    • [x] [AppBar] Improve the design #18308 (BC: #26545)
    • [x] [Checkbox][Switch] Remove dependency on IconButton #21503 (BC: #26460)
    • [x] [docs] Use the default theme #22112,
    • [x] [theme] Dark mode colors #18378
    • [x] ~Material Design states #10870~ deferred @siriwatknp
    • [x] ~[Tabs] Update to match the specification #15324~ deferred (can be workaround by css) @siriwatknp
    • [x] [theme] Improve the breakpoints values #21902
    • [x] [Menu] Remove MenuItem dependency on ListItem #21587
    • [x] [Slider] Update to match the spec #20153
    • [x] [IconButton] Update default size and add large #24045
    • [x] ~[Button] Update to match the spec #19664~ deferred @siriwatknp

    Lab to core components

    I think that we can aim to move the following components from the lab to the core:

    โœ… Components
    • [x] Alert (#22651)
    • [x] Autocomplete (#22715)
    • [x] AvatarGroup #18869 (#23121)
    • [x] Pagination (#22848)
    • [x] Rating (#22725)
    • [x] Skeleton (#22740)
    • [x] SpeedDial (finally!) (#22743)
    • [x] Toggle Button (#22784)

    The only component I have would propose to handle later on is the TreeView. We still have a couple of important features to implement, and might need to change the API to ship these features. Once we do, we'll start to get more adoption, so the more likely it is that developers will uncover root issues.

    Supported browsers

    While we plan to keep IE 11 support until v6, We will look into proposing different proposing entry points #18447. and if we can drop older browsers' versions #15496.


    โœ… List of breaking changes we can introduce with a deprecation during v4.
    • [x] ~Drop createStyles (see
    • [x] ~[Portal] Remove Portal disablePortal prop. Maybe we can implement the logic at the Portal component consumer level.
    • [x] [theme] Remove theme.mixins.gutters. I don't believe we document them, nor are they used. (BC: #22109, Dep: #22245)
    • [x] [theme] Rename theme type -> mode. While the spec use "schema", saying "dark mode" seems to be more common, e.g (BC: #22687, "Dep": #22702 โ€“ adaptV4Theme())
    • [x] [theme] Rename color helpers (BC: #22834, Dep: #22837)
    • [x] [test] Remove enzyme test helpers. They are legacy. It's also a good opportunity to upgrade the documentation #17070. (BC: #21855, #21863, Dep: #24074)
    • [x] Remove the onX* transition props from Dialog, Snackbar, Menu & Popover, (Snackbar BC: #22107, Dep: #22206; Popover BC: #22184, Dep: #22202; Dialog BC: #22113, Dep: #22114; Menu BC: #22212, Dep: #22213)
    • [x] Remove RootRef, it relies on ReactDOM.findDOMNode(component) that is already deprecated. (BC: #21974, Dep: #24075)
    • [x] [icons] Change default fontSize prop's value: default -> medium, for consistency with the other components #14993. (BC: #23950, Dep: #23951)
    • [x] [Accordion] Normalize focusVisible logic (BC: #22567, Dep: #24083)
    • [x] [Avatar] Rename variant circle -> circular for consistency #21964. (BC: #22015, Dep: #22090)
    • [x] [Badge] Rename overlap circle -> circular and rectangle -> rectangular for consistency #21964. (BC: #22050, Dep: #22076)
    • [x] [CircularProgress] Remove one variant. Kill the current determinate variant, rename static => determinate. (BC: #22060, Dep: #22094)
    • [x] [Collapse] Add orientation and horizontal support (BC: #20619, Dep: #24079)
    • [x] [Dialog] Remove withMobileDialog. #14992. We have already removed it from the documentation. (BC: #23202, Dep: #23570)
    • [x] [Dialog][Modal] Remove disableBackdropClick (BC: #23607, Dep: #24081)
    • [x] [Fab] Rename Fab round -> circular for consistency #21964. (BC: #21903, Dep: #24080)
    • [x] [Grid] Rename prop justify -> justifyContent to match system API. (BC: #21845, Dep: #24078)
    • [x] [GridList] Rename component to ImageList as more intuitive and better match the wording of the Material Design spec #14994. (BC: #22311, Dep: #22363)
    • [x] [GridList] Rename Tile to Item (BC: #22385, Dep: #22363)
    • [x] [GridList] Refactor using CSS grid & React context (BC: #22395, Dep: #22363)
    • [x] [GridList] Rename spacing prop to gap to align with the CSS attribute. (BC: #22395, Dep: #22363)
    • [x] [GridList] Rename the GridList cellHeight prop to rowHeight. (BC: #22395, Dep: #22363)
    • [x] [GridList] Rename the GridListItemBar titlePosition prop to position. (BC: #22395, Dep: #22363)
    • [x] [Modal] Add support for onKeyDown and remove onEscapeKeyDown (BC: #23571, Dep: #24081)
    • [x] [Portal] Remove onRendered -> ref. context: (BC: #22464, Dep: #24082)
    • [x] [TextareaAutosize] Rename rowsMax -> maxRows for consistency, (BC: #21873, Dep: #23530)
    • [x] [Table] Rename onChangeRowsPerPage -> onRowsPerPageChange, onChangePage -> onPageChange for consistency. It's a good opportunity to mention this API design choice in the documentation:; (BC: #22900, Dep: #23789)
    • [x] [theme] Remove the fade color helper #13039. (BC: #25895)
    • [x] [Button] Remove the buttonRef prop. (BC: #25896, Dep: #25897)
    • [x] [Popover] Remove getContentAnchorEl prop. This method was present to implement a macOS native select like experience. It complicates the implementation of the Popover and could prevent us from moving #17353 forward.
    • [x] [TextField] The position prop should be required in InputAdornment. (BC: #25891, Dep: #25912)
    • [x] [Button] Change LoadingButton prop pending to loading #21593 (BC: #25874)
    • [x] [SwitchBase] Remove second onChange argument: is enough. (BC: #25871)
    • [x] [theme] Remove the exported theme.typography.round helper. (BC: #25914, Dep: #25916)
    • [x] ~[theme] Remove legacy v4 deprecation Object.defineProperty(spacing, 'unit', {~
    • [x] ?[theme] Replace theme.direction === 'rtl' -> theme.isRtl.
    • [x] [Table] Rename padding="default" -> padding="normal" (BC: #25924, Dep: #25990)
    • [x] [theme] Remove function width(key) { return values[key]; }, it's useless. (BC: #25918, Dep: #25993)
    • [x] [theme] Rename createMuiTheme -> createTheme to match ThemeProvider's theme prop. (BC: #25992, Dep: #26004)
    • [x] ~?[theme] Flatten colors to support CSS variables as theme option #12827~ later

    For a list of committed breaking changes and associated deprecations, see:

    Breaking changes

    Unlike the previous section, these are breaking changes we can't gracefully warn against.

    • [x] ~? [AppBar] Change default position from fixed to static. What's the most frequent AppBar position?~

    • [x] ~? Rotate 180ยฐ icons to only include one? Involve: TablePagination, Pagination or DatePicker~.

    • [x] ~[Slider] Fix the class names naming. track and rail means the same thing.~

    • [x] [Container] Revisit max-width values to be more useful #21902

    • [x] [core] Only support node >= 10 (#22814)

    • [x] [theme] Remove dead palette.text.hint key

    • [x] [theme] Always return value with 'px' unit in the spacing function breaking change enhancement #16205 (#22552)

    • [x] [theme] Breakpoints down use interval. Same as #13448 (#22695)

    • [x] [Chip] Change variant default value #18914 (#22683)

    • [x] [Divider] Use border instead of block content (#18965)

    • [x] [Pagination] Rename round -> circular for consistency #21964. (#22009)

    • [x] [Popper] Figure out what we do with popper.js, we have 4 options upgrade, remove it, rewrite it, fork it #19358 (#21761)

    • [x] [Skeleton] Rename variant circle -> circular and rect -> rectangular for consistency #21964. (#22053)

    • [x] [Slider] Custom tooltip ignores valueLabelFormat and valueLabelDisplay #17905.

    • [x] [Snackbar] Change default position. Change the default position of the snackbar on desktop to bottom left. This will better be aligned to the behavior of, Gmail, Google Keep, notistack, etc. (#21980)

    • [x] [Stepper] Remove Paper component #18423 (#22564)

    • [x] [Textfield] Change the default variant -> outlined. Per (#23503)

    • [x] [CssBaseline] Apply body2 -> body1 #17100. (#24018)

    • [x] [types] Remove deprecated SimplifiedPropsOf/Simplify types. #24750

    • [x] ~[typescript] Only support TypeScript 3.8 and onwards. Omit was added in 3.5, can be removed from @material-ui/types.~

    • [x] [Select] Change the default variat as TextField #24895

    • [x] [Box] Remove the clone prop #18496 (BC #26031)

    • [x] [core] Remove deprecated innerRef prop, forwardRef do the job now. (BC #26028)

    • [x] [Select] Remove labelWidth prop #22799 (BC: #26026)

    • [x] [Hidden] Remove component #19704. The CSS API can be replaced with the Box, the JS API can be replaced with useBreakpoint or useMediaQuery. (BC: #26135)

    • [x] Remove withWidth, replace with useBreakpoint() #17350. (BC: #26136)

    • [x] [theme] Remove MuiThemeProvider alias. ThemeProvider is enough. (BC: #26171)

    • [x] [Autocomplete] Rename the reasons for consistancy. 'create-option' is not OK. It should be camelCase. (BC: #26172)

    • [x] ~[Select] Replace with #21782 (PR #26221)~ Do in the lab instead

    • [x] [Autocomplete] Polish the pseudo-classes customization API #19692 (BC: #26181)

    • [x] ~[Grid] Remove the type exports, developers don't need them. (BC: #26187)~

    • [x] [Select] CSS API's 'selectMenu' maps to the same element as 'select' #11646. (BC: #26186)

    • [x] [Autocomplete] getOptionSelected is confusing, rename to optionEqualValue #24855 (BC: #26173)

    • [x] [core] Normalize file location. #23208 (BC: #26265)

    • [x] ~Improve the color prop handling #13028~ [move to v5.1]

    • [x] [List] Improve <ListItem button> #13597 (PR: #26446)

    • [x] Check if Button > span still required. (PR: #26666, #26801)

    • [x] ~[CssBaseline] Improve CSS reset, can we leverage any of, deferred @siriwatknp.

    • [x] Remove wrapper in BottomNavigationAction

    • [x] ~ref attribute is not the root element #19613~ [move to v5.x]


    I think that we can try the following:

    1. Deprecation preparation. (starts now)
    2. Create the next branch, publish the next versions under and the next npm tag. (April?). Stop all efforts on the v4.x version. Put the master branch (v4.x) in a low maintenance mode, only handle security fixes.
    3. Work on the above items, in whatever order is simpler, keep the same release schedule, once a week, with alpha first.
    4. Once we have handled all the breaking changes and confidence with the architectural choices move to a beta stage. Once we are confident with the implemented features, start release candidates.
    Current progress 109/109
    .reduce((acc, item) => {
      if (item.querySelector('input[type="checkbox"]:checked')) {
        acc.done += 1;
      } += 1;
      return acc;
    }, { total: 0, done: 0 });
    opened by oliviertassinari 92
  • [Stepper] Add new component

    [Stepper] Add new component

    Closes #2722.

    I just created**_ Vertical Stepper_** include animation, linear step, non-linear step, optional step. To be clear and easy to handle logic how to active a step and when the step is completed, the component delegate the implementation of those function to user(who use this component) to handle logic by themselves. This is a picture to demonstrate how it work test Please take a look at this component. Thank you so much :)

    opened by namKolo 83
  • [Chip] New component

    [Chip] New component

    • [x] PR has ~~tests~~ / docs demo, and is linted.
    • [x] Commit and PR titles begin with [ComponentName], and are in imperative form: "[Component] Fix leaky abstraction".
    • [x] Description explains the issue / use-case resolved, and auto-closes the related issue(s) (

    New Chip component.


    • Text only and "Contact" avatars.
    • Contact Avatars can be image, icon (svg or font) or text.
    • Optional delete icon.
    • Focus shadow, click shading.
    • Touch and keyboard events supported.

    screen cap chips

    Still to do:

    • ~~Agree the API - currently supports both props and composability for label and Avatar. As a new component we might want to only support composability.~~
    • ~~Decide on required event callbacks. I took a kitchen sink approach, but we might want to narrow it down (or add others, such as drag events).~~
    • ~~PropTypeDescription is refusing to work, and I'm not sure why, so Ive removed it from the docs Page.js for now.~~
    • ~~Refactoring based on @callemall/material-ui review :sweat_smile:~~
    • ~~Tests.~~ (Thanks @nathanmarks!)
    • ~~Delete button not working in Firefox. (zIndex?)~~ (Thanks @newoga!)

    Closes #1119.

    opened by mbrookes 78
  • [TextField] Add outlined and filled variants

    [TextField] Add outlined and filled variants

    • Specs:
    • Reference implementation:

    capture d ecran 2018-09-16 a 13 26 17

    capture d ecran 2018-09-16 a 13 26 07

    Closes #11962

    enhancement component: TextField 
    opened by enagy27 76
  • [AppBar] Added a demo in Enable color on dark section.

    [AppBar] Added a demo in Enable color on dark section.


    • Added a demo in the "Enable Color on Dark" section.

    • The section in the documentation about this:

    Previously it had only the steps to enable color on dark mode. By adding a demo, it will give more clarity to developers on this matter.


    • Added a demo - Demo contains a Switch to toggle between enabling and disabling of color on dark mode.

    • Also added a separate theme mode change button on the app bar to check the difference between light and dark modes.


    Capture1 Capture2

    opened by Wimukti 1
  • Textfield not being themable

    Textfield not being themable

    Hi, i'm trying to customize my textfield to match with our color scheme. However, the colors don't seem to propagate.

    Here's an example picture of what happens when you set a color via a theme.


    The outline should be either the secondary color, or the same as the primary one, or the lighter/darker theme. Definitely not blue!

    I cannot override the outlineInput, as that removes the red color from when it errors, all i want is a nice override like how it changes when you do color=secondary.

    • [X] The issue is present in the latest release.
    • [X] I have searched the issues of this repository and believe that this is not a duplicate.

    Current Behavior ๐Ÿ˜ฏ

    Outline color is blue

    Expected Behavior ๐Ÿค”

    The color should match the selected color theme override

    Steps to Reproduce ๐Ÿ•น

    Couldn't get any codesandbox to work with new mui.

    here's my code:


                label="Your email address*"
                error={ && Boolean(}
                helperText={ &&}

    theme override:

    export const theme: Theme = createTheme({
      palette: {
        primary: {
          main: '#00bfa5;',
      // components: {
      //   MuiTextField: {
      //     styleOverrides: {
      //       root: {
      //         '& .MuiOutlinedInput-root': {
      //           '&:hover fieldset': {
      //             borderColor: 'rgba(0,0,0,.38);',
      //           },
      //           '&.Mui-focused fieldset': {
      //             borderColor: '#00bfa5;',
      //           },
      //         },
      //       },
      //     },
      //   },
      // },


    1. create a textfield
    2. override theme with primary main color
    3. observe that the textfield does not pass down the correct color to outlined input

    Context ๐Ÿ”ฆ

    Trying to make a pretty registration page

    Your Environment ๐ŸŒŽ

    `npx @mui/envinfo`
        OS: macOS 11.6
        Node: 14.17.5 - /usr/local/bin/node
        Yarn: 1.22.15 - /usr/local/bin/yarn
        npm: 7.21.1 - /usr/local/bin/npm
        Chrome: Not Found
        Edge: Not Found
        Firefox: Not Found
        Safari: 15.0
        @emotion/react: ^11.4.1 => 11.4.1 
        @emotion/styled: ^11.3.0 => 11.3.0 
        @mui/core:  5.0.0-alpha.50 
        @mui/icons-material: ^5.0.3 => 5.0.3 
        @mui/material: ^5.0.3 => 5.0.3 
        @mui/private-theming:  5.0.1 
        @mui/styled-engine:  5.0.1 
        @mui/system:  5.0.3 
        @mui/types:  7.0.0 
        @mui/utils:  5.0.1 
        @types/react: ^17.0.29 => 17.0.29 
        react: ^17.0.2 => 17.0.2 
        react-dom: ^17.0.2 => 17.0.2 
        typescript: ^4.4.4 => 4.4.4 

    using brave browser

    status: needs triage 
    opened by sbitenc 0
  • Create themes.dart

    Create themes.dart

    opened by Anujjainwin 1
  • Popper within Dialog not working

    Popper within Dialog not working

    I have a component that once clicked opens a popper underneath with some clickable stuff. In one of the project I use, the popper is within a dialog and opens in the background (can't see or interact with it)

    I recently moved to mui5 and used to use that solution for mui4:

    • [X] The issue is present in the latest release.
    • [X] I have searched the issues of this repository and believe that this is not a duplicate.

    I removed all this, it's self explanatory. It seems that the popper api doesn't use zIndex as a way to display itself therefore the nifty zIndex trick doesn't work anymore.

    I did search before posting this, but if I've missed it, please show me the way and I'll remove this bug report.

    Cheers guys!

    status: needs triage 
    opened by PiTiLeZarD 0
  • Styling another component with styled()

    Styling another component with styled()

    • [X] The issue is present in the latest release.
    • [X] I have searched the issues of this repository and believe that this is not a duplicate.

    Is there a way to style another component with styled() without using classes but targeting the styled component? Being able to do something like this:

    const Child = styled('div')({
      color: 'red'
    const Parent = styled('div')({
      [`& ${Child}`]: {
        color: 'green'
    render (
            <Child>Green because I am inside a Parent</Child>
        <Child>Red because I am not inside a Parent</Child>

    If it's already possible, could it be added to the documentation? Because I wasn't able to find such information.

    status: needs triage 
    opened by MariaSolOs 1
  • [docs] Demo LoadingButtonsTransition crashes

    [docs] Demo LoadingButtonsTransition crashes

    Steps to Reproduce

    1. Visit
    2. ??
    3. demo LoadingButtonsTransition crashes

    Your Environment

    | Tech | Version | |--------------|---------| | MUI | v5.0.4 | | netlify deploy | | | Browser | Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36 |

    opened by SrDeLasTinieblas 0
  • [website] Landing page top examples cut off

    [website] Landing page top examples cut off

    The top right section of the landing page is cut off and cannot be scrolled, making it impossible to see some of the cool examples.

    • [x] The issue is present in the latest release.
    • [x] I have searched the issues of this repository and believe that this is not a duplicate.

    Current Behavior ๐Ÿ˜ฏ

    The height is based on the screen height (calc(100vh - 120px)). Overflowing content is hidden.

    Note that e.g. the "Use the sx prop to add these properties" example is not fully visible.


    Expected Behavior ๐Ÿค”

    IMO the best way to handle this is by making the section scrollable.

    Steps to Reproduce ๐Ÿ•น


    1. Go to

    Context ๐Ÿ”ฆ

    I noticed that the "Use the sx prop to add these properties" example was cut off.

    Your Environment ๐ŸŒŽ

    24" screen in landscape orientation :smile:

    status: needs triage 
    opened by LorenzHenk 0
  • [docs] Add next.js styled-component guide and update links to example

    [docs] Add next.js styled-component guide and update links to example


    Add information about adding support for styled-components using next.js.

    I think given the configuration is more involved when using Next.js, It makes sense to add a bit more information about it.


    • Add a Next.js section to the styled engine guide
    • Touch up โ€œReady-to-use examplesโ€œ example section and update links


    Screen Shot 2021-10-17 at 11 43 43 AM
    opened by Jareechang 1
  • Can not place label at the top right of  the textfiled

    Can not place label at the top right of the textfiled

    Here is the video demo: Demo video My text field <TextField style={{ direction: "rtl" }} InputLabelProps={{ classes: { root: classes.labelRoot, shrink: classes.shrink } }} label={t("Ad Title (eg: Toyota Camry 2018 for Sale)")} variant="outlined" fullWidth onChange={ev => setData({, title: })} value={data ? data.title : ''} required /> and Style for the text filed: const useStyles = makeStyles((theme) => ({ formControl: { margin: theme.spacing(3), }, formControl: { position: 'absolute', left: 0, top: 0, transform: 'translate(0, 24px) scale(1)', }, labelRoot: { right: "20px", }, shrink: { transformOrigin: "top right", transform:"translateX(50px)" } })); Please suggest how to solve that issue i want the empty space for lable on left to be on right where the lable is

    status: needs triage 
    opened by AbdulWahab-Esketchers 0
  • v5.0.4(Oct 14, 2021)

    Oct 14, 2021

    A big thanks to the 17 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿงช Added UnstyledInput and useInput hook in the the first component in @mui/core package @michaldudak (#28053)
    • ๐Ÿ› Fixed many bugs and improved the documentation ๐Ÿ“š.

    @mui/[email protected]

    • โ€‹[Chip] disable ripple only if onDelete is present. (#29034) @mottox2
    • โ€‹[Pagination] Fix clicking on ... triggering onChange with page value null (#28884) @ZeeshanTamboli
    • โ€‹[Tabs] Alternative way to disable ":first-child is unsafe" error (#28982) @hbjORbj
    • โ€‹[Tabs] Fix ":first-child is potentially unsafe" error (#28890) @hbjORbj
    • โ€‹[transitions] Mark children as required where nullish children would crash at runtime (#29028) @eps1lon

    @mui/[email protected]

    • โ€‹[system] Update typing for style function (#28744) @hbjORbj

    @mui/[email protected]

    • โ€‹[InputUnstyled] Create unstyled input and useInput hook (#28053) @michaldudak

    @mui/[email protected]

    • โ€‹[DesktopDatePicker] add Paper props to pass down to Paper component (#28865) @amen-souissi


    • โ€‹[docs] Add JSDoc to theme.breakpoints (#29039) @eps1lon
    • โ€‹[docs] Rename broken package names in docs pointing to @mui/material (#29006) @visualfanatic
    • โ€‹[docs] Add troubleshooting guide for unexpected styles (#28907) @mnajdova
    • โ€‹[docs] Fix issues reported by ahref (#28986) @mnajdova
    • โ€‹[docs] Remove json translations for dropped locales (#28987) @mnajdova
    • โ€‹[docs] Fix type signature of renderGroup in Autocomplete (#28876) @tanyabouman
    • โ€‹[docs] Minor typo in v4-v5 migration docs (#28995) @kgregory
    • โ€‹[docs] Add mui-image related project (#28621) @benmneb
    • โ€‹[docs] Update Getting Started Templates' Source URIs (#28929) @epodol
    • โ€‹[docs] Improve search experience (#28801) @siriwatknp
    • โ€‹[docs] Fix demo of the responsive drawer (#28226) @goncalovf
    • โ€‹[docs] Fix global theme link demo (#28974) @ZeeshanTamboli
    • โ€‹[docs] Update box example to use 'backgroundColor' rather than 'bgColor' (#28958) @Jareechang
    • โ€‹[docs] corrected Box import for sx-prop example (#28873) @phudekar
    • โ€‹[docs] Fix footnote ID links in (#28849) @officialpiyush
    • โ€‹[docs] Fix color & density playground (#28803) @siriwatknp
    • โ€‹[docs] Improve visibility of styled engine configuration section in installation guide (#28903) @Jareechang


    • โ€‹[core] Prevent yarn cache growing infinitely (#29040) @eps1lon
    • โ€‹[core] Update browserslist (#29025) @eps1lon
    • โ€‹[core] Update peerDependencies to require latest instead of next (#29007) @eps1lon
    • โ€‹[core] Increase memory limit for size:snapshot (#29005) @eps1lon
    • โ€‹[core] Init private Joy package (#28957) @siriwatknp
    • โ€‹[test] Remove a11y snapshot tests (#28887) @eps1lon

    All contributors of this release in alphabetical order: @amen-souissi, @benmneb, @epodol, @eps1lon, @goncalovf, @hbjORbj, @Jareechang, @kgregory, @michaldudak, @mnajdova, @mottox2, @officialpiyush, @phudekar, @siriwatknp, @tanyabouman, @visualfanatic, @ZeeshanTamboli

    Source code(tar.gz)
    Source code(zip)
  • v5.0.3(Oct 7, 2021)

    Oct 7, 2021

    A big thanks to the 19 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿงช Created the first component in @mui/material-next - our v6 prototype package.
    • ๐Ÿ› Fixed many bugs and improved the documentation ๐Ÿ“š.

    @mui/[email protected]

    • โ€‹[Stack] Add props & variants types in the theme (#28843) @mnajdova
    • โ€‹[InputLabel] Fix condition for applying formControl overrides (#28707) @yevheniiminin
    • โ€‹[Tooltip] Allow overriding internal components and their props (#28692) @michaldudak
    • โ€‹[transitions] Fix addEndListener not being called with the DOM node (#28715) @eps1lon

    @mui/[email protected]

    • โ€‹[codemod] Fix optimal-imports to support v4 and v5-alpha, beta (#28812) @siriwatknp

    @mui/[email protected]

    • โ€‹[system] Add padding/margin-block/inline to spacing (#28813) @smmoosavi

    @mui/[email protected]

    • โ€‹Don't allow styled-components APIs on mui styled function (#28807) @hbjORbj

    @mui/[email protected]

    • โ€‹[ButtonUnstyled] Don't set redundant role=button (#28488) @michaldudak
    • โ€‹[SliderUnstyled] Prevent unknown-prop error when using marks prop (#28868) @hbjORbj

    @mui/[email protected]

    • โ€‹[pickers] Change view even if onViewChange is set (#28765) @eps1lon

    @mui/[email protected]

    • โ€‹[Button-next] Create Button in material-next (#28313) @michaldudak


    • โ€‹[docs] Add alike v4 default button color in migration (#28881) @siriwatknp
    • โ€‹[docs] Use PNG instead of SVG for color preview (#28699) @eps1lon
    • โ€‹[docs] Use client-side navigation when activating docsearch results (#28750) @eps1lon
    • โ€‹[docs] Fluid icon size in icons search (#28747) @eps1lon
    • โ€‹[docs] Fix the wrong import in docs grid page (#28863) @taghi-khavari
    • โ€‹[docs] Fix typo in Pagination docs (#28864) @ZeeshanTamboli
    • โ€‹[docs] Fix 404 links (#28710) @mnajdova
    • โ€‹[docs] Fix typo in Mui CSS classname (#28725) @cacpgomes
    • โ€‹[docs] Match example to codesandbox demo and update ID link (#28762) @AnilSeervi
    • โ€‹[docs] Fix typo in system/box documentation (#28822) @iamsergo
    • โ€‹[docs] Use HTML standards for autocomplete attributes (#28827) @epodol
    • โ€‹[docs] Improve styled-components integration (#28713) @mnajdova
    • โ€‹[docs] Correct Select's menu placement description (#28748) @michaldudak
    • โ€‹[docs] AdapterDayJS -> AdapterDayjs (#28770) @veerreshr
    • โ€‹[docs] Theme documentation, typo fix (#28805) @saeedseyfi
    • โ€‹[docs] Add the last diamond sponsor (#28737) @hbjORbj
    • โ€‹[docs] Fix various links in CONTRIBUTING (#28751) @AnilSeervi
    • โ€‹[docs] Only add JSS to demos (#28698) @eps1lon
    • โ€‹[docs] Update v5 status in release schedule (#28700) @owais635
    • โ€‹[docs] Fix typo in /guides/styled-engine (#28720) @Sharry0
    • โ€‹[docs] Fix typo in chip documentation (#28641) @avranju94
    • โ€‹[docs] Fix versions page (#28682) @mnajdova
    • โ€‹[docs] Remove legacy team page (#28646) @mnajdova
    • โ€‹[website] add "React" to the hero description (#28830) @danilo-leal
    • โ€‹[website] Fix constantly reloading when Russian language is set (#28869) @mnajdova
    • โ€‹[website] Compress one avatar image on about us page (#28823) @hbjORbj
    • โ€‹[website] Hide 'become a diamond sponsor' box on landing page (#28814) @hbjORbj
    • โ€‹[website] Update Benny's profile on about us page (#28816) @hbjORbj


    • โ€‹[core] Remove --exact from release:version (#28840) @siriwatknp
    • โ€‹[core] Neglect framer from release flow (#28680) @siriwatknp
    • โ€‹[test] Add a test for not allowing styled-components' APIs on mui styled function (#28862) @hbjORbj
    • โ€‹[test] Fix instances where type tests were only passing due to object being part of ReactNode (#28804) @eps1lon
    • โ€‹[test] Move ByMuiTest to test/utils (#28509) @eps1lon

    All contributors of this release in alphabetical order: @AnilSeervi, @avranju94, @cacpgomes, @danilo-leal, @epodol, @eps1lon, @hbjORbj, @iamsergo, @michaldudak, @mnajdova, @owais635, @saeedseyfi, @Sharry0, @siriwatknp, @smmoosavi, @taghi-khavari, @veerreshr, @yevheniiminin, @ZeeshanTamboli

    Source code(tar.gz)
    Source code(zip)
  • v5.0.2(Sep 29, 2021)

    Sep 29, 2021

    A big thanks to the 15 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ”ง Improve jss-to-styled codemod to use new package names.
    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @mui/[email protected]

    • โ€‹[Checkbox] Fix form submission with empty value (#28423) @garronej
    • โ€‹[Slider] Don't error on minimal changes with readonly value (#28472) @eps1lon
    • โ€‹[Switch] Fix style overrides on input (#28576) @praveenkumar-kalidass
    • โ€‹[useMediaQuery] Add types for matchMedia option and deprecate exported interfaces (#28413) @eps1lon

    @mui/[email protected]

    • โ€‹[codemod] Add MenuItem v.1.0.0 transform for primaryText property (#28640) @dmitry-yudakov
    • โ€‹[codemod] Update the imports in jss-to-styled to match the new package names (#28667) @mnajdova

    @mui/[email protected]

    • โ€‹[system] Fix types to support theme callbacks on pseudo and nested selectors (#28570) @mnajdova


    • โ€‹[docs] Remove languages: fr, de, ja, es, ru (#28663) @mnajdova
    • โ€‹[docs] Improve old doc versions discoverability (#28651) @danilo-leal
    • โ€‹[docs] Make the Toggle Button size demo use default icon size (#28656) @danilo-leal
    • โ€‹[docs] Uniformize the code's font family (#28582) @oliviertassinari
    • โ€‹[docs] Removed duplicate line in file (#28635) @naveen-bharathi
    • โ€‹[docs] Fix title MUI x2 (#28634) @oliviertassinari
    • โ€‹[docs] Polish email validation logic (#28255) @kiznick
    • โ€‹[docs] Improve phrasing (#28253) @adamthewebguy
    • โ€‹[docs] Fix color in example (#28527) @alexeagleson
    • โ€‹[docs] Fix typo in generated class names section (#28549) @fxlemire
    • โ€‹[docs] Mention Premium pricing cap (#28581) @oliviertassinari
    • โ€‹[docs] Update examples to use latest mui #28565 @siriwatknp
    • โ€‹[docs] Push the fixes on Next.js's Link to the examples (#28178) @oliviertassinari
    • โ€‹[docs] Fix wrong name for zIndex's property example in /system/ (#28541) @chetrit
    • โ€‹[examples] Nextjs Link missing passHref #28588 (#28661) @Brlaney
    • โ€‹[website] Iteration on the pricing page (#28406) @danilo-leal
    • โ€‹[website] Batch fixes (#28564) @siriwatknp


    • โ€‹[core] Improve Renovate groups (#28642) @eps1lon
    • โ€‹[core] Batch small changes (#28553) @oliviertassinari
    • โ€‹[test] Document where the value for SwitchBase#value comes from (#28638) @eps1lon
    • โ€‹[test] Make seconds views test pass in browsers (#28511) @eps1lon

    All contributors of this release in alphabetical order: @adamthewebguy, @alexeagleson, @Brlaney, @chetrit, @danilo-leal, @dmitry-yudakov, @eps1lon, @fxlemire, @garronej, @kiznick, @mnajdova, @naveen-bharathi, @oliviertassinari, @praveenkumar-kalidass, @siriwatknp

    Source code(tar.gz)
    Source code(zip)
  • v5.0.1(Sep 22, 2021)

    Sep 22, 2021

    A big thanks to the 15 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ”Ž Improve the search on the documentation.
    • ๐Ÿ“š Improve the v4 to v5 migration guide.
    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @mui/[email protected]

    • โ€‹[Radio] Fix support for number value type (#26772) @sakura90
    • โ€‹[useMediaQuery] Reduce bundle size (#28412) @eps1lon

    @mui/[email protected]

    • โ€‹[codemod] Cover edge case for theme-spacing #28400 @siriwatknp

    @mui/[email protected]

    • โ€‹[DateTimePicker] Support seconds view (#25095) @breitembach
    • โ€‹[TimePicker] Fire change event when meridiem changes (#26600) @coder-freestyle


    • โ€‹[docs] Fix missing exit animation for transition Poppers (#28506) @eps1lon
    • โ€‹[docs] Fix migration v5 docs (#28530) @siriwatknp
    • โ€‹[docs] Avoid re-mounting the whole tree when switching theme direction (#28495) @eps1lon
    • โ€‹[docs] Fix html compliance (#28429) @oliviertassinari
    • โ€‹[docs] Use hyphen-case for CSS properties in /system/properties (#28489) @chetrit
    • โ€‹[docs] Update caret position in comments to match npm scope (#28426) @eps1lon
    • โ€‹[docs] Fix CONTRIBUTING to point out to master as targeted branch (#28396) @mnajdova
    • โ€‹[docs] Update examples to remove 'beta' (#28475) @oliviertassinari
    • โ€‹[docs] Fix 404 links to MUI X API (#28176) @oliviertassinari
    • โ€‹[docs] Fix broken/incorrect attributes links in Avatar and NativeSelect API pages (#28417) @xenostar
    • โ€‹[docs] Explain how <Alert icon={false} /> behaves (#28348) @nguyenkhanhnam
    • โ€‹[docs] Fix typo in /system/the-sx-prop (#28393) @danwoods
    • โ€‹[docs] Correct the migration doc (#28391) @michaldudak
    • โ€‹[docs] Fix the notification display logic (#28389) @oliviertassinari
    • โ€‹[docs] Add notification for v5 @oliviertassinari
    • โ€‹[docs] Fix typo (#28521) @valse
    • โ€‹[website] Implement algolia redesign (#28252) @hbjORbj
    • โ€‹[website] Update data-grid dependencies #28531 @siriwatknp
    • โ€‹[website] Cleanup unused files after rebranding (#28505) @siriwatknp
    • โ€‹[website] Update /company pages to use marketing website Header and Footer (#28498) @danilo-leal
    • โ€‹[website] Optimize images (#28486) @michaldudak
    • โ€‹[website] Add components index page (#28485) @siriwatknp
    • โ€‹[website] Fix typo (#28478) @oliviertassinari
    • โ€‹[website] Fix crash (#28474) @oliviertassinari
    • โ€‹[website] Close the open engineering roles (#28428) @oliviertassinari
    • โ€‹[website] Fix 40x links (#28401) @mnajdova
    • โ€‹[website] Fix SEO issues reported by (#28402) @mnajdova
    • โ€‹[website] Fix production issues (#28384) @siriwatknp


    • โ€‹[core] Fix release:changelog base branch (#28533) @mnajdova
    • โ€‹[core] Remove code handling JSS components (#28421) @eps1lon
    • โ€‹[core] Remove unused dependencies (#28468) @eps1lon
    • โ€‹[core] Ensure both docs bundles are analyzeable (#28410) @eps1lon
    • โ€‹[core] Switch to webpack 5 (#28248) @eps1lon
    • โ€‹[core] Batch small changes (#28177) @oliviertassinari
    • โ€‹[core] Update publish tag to latest (#28382) @mnajdova
    • โ€‹[framer] Update @mui/* dependencies (#28469) @eps1lon
    • โ€‹[test] Add custom queries to screen (#28507) @eps1lon
    • โ€‹[test] Run listChangedFiles against master (#28504) @eps1lon
    • โ€‹[test] Increase BrowserStack timeout for Firefox (#28476) @oliviertassinari
    • โ€‹[test] Use testing-library alpha when running React 18 tests (#28267) @eps1lon

    All contributors of this release in alphabetical order: @breitembach, @chetrit, @coder-freestyle, @danilo-leal, @danwoods, @eps1lon, @hbjORbj, @michaldudak, @mnajdova, @nguyenkhanhnam, @oliviertassinari, @sakura90, @siriwatknp, @valse, @xenostar

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0(Sep 16, 2021)

    Sep 16, 2021

    After over 400 days of development and over 40 canary releases, we are excited to introduce MUI Core v5.0.0!

    Some statistics with the release of v5.0.0 compared to the one of v4.0.0:

    • 5,832 new commits
    • From 2M downloads/month to 9.5M downloads/month on npm
    • From 350k users/month to 700k users/month on the documentation

    A big thanks to the 600+ contributors who made the release possible!

    The 5.0.0 version includes all changes done in the alpha, beta, and rc releases listed below. These are the changes done from the last release candidate version (5.0.0-rc.1):

    @mui/[email protected]

    • โ€‹[Autocomplete] Fix reset value on blur for freeSolo input (#28190) @praveenkumar-kalidass
    • โ€‹[ButtonBase] Revert to the pre-unstyled implementation (#28225) @michaldudak
    • โ€‹[Checkbox] Fix color proptype typo (#28265) @sydneyjodon-wk
    • โ€‹[Tooltip] Ensure user-select CSS property is reverted after touch end (#28372) @tholman

    @mui/[email protected]

    • โ€‹[system] Fix missing typings for createSpacing (#28361) @eps1lon

    @mui/[email protected]

    • โ€‹[codemod] Fix jss-to-styled to support other export class, function etc. (#28321) @jedwards1211

    @mui/[email protected]

    • โ€‹[DateTimePicker] Change bottom position of AM/PM buttons (#27534) @nikitabobers
    • โ€‹[pickers] Add visual regression tests for open views (#28224) @eps1lon


    • โ€‹[blog] Introducing MUI Core v5.0 (#27912) @oliviertassinari
    • โ€‹[docs] Fix quotes in font-face literal (#28260) @Aurelain
    • โ€‹[docs] Update redirects to X's docs (#28263) @m4theushw
    • โ€‹[docs] Change Material-UI to MUI in the console (#28270) @mbrookes
    • โ€‹[docs] Docs redesign adjustments (#28203) @mnajdova
    • โ€‹[docs] How to compose theme in steps (#28246) @goncalovf
    • โ€‹[docs] Fix DataGrid demo console warning in Table docs (#28235) @ZeeshanTamboli
    • โ€‹[docs] Fix typo in v4 to v5 migration guide (#28353) @zadeviggers
    • โ€‹[docs] Fix typo in transition docs (#28312) @tamboliasir1
    • โ€‹[docs] Use https for material-ui & reactcommunity links (#28304) @aghArdeshir
    • โ€‹[docs] Add IBM Plex font locally (#28325) @siriwatknp
    • โ€‹[docs] Fix failing client-side navigation for /api routes (#28356) @eps1lon
    • โ€‹[docs] Update the nav order (#28323) @mbrookes
    • โ€‹[docs] Compress images with ImageOptim @oliviertassinari
    • โ€‹[docs] Replace remaining unstyled package reference (#28351) @michaldudak
    • โ€‹[docs] No import from react-router (#28329) @eps1lon
    • โ€‹[website] Refine website before go-live (#28081) @siriwatknp
    • โ€‹[website] Update manifest to new logo (#28355) @siriwatknp
    • โ€‹[website] Add product-x page (#28106) @siriwatknp
    • โ€‹[website] Revert store URL to (#28365) @michaldudak
    • โ€‹[website] Rename domain to (#28332) @mnajdova


    • โ€‹[core] Replace Material-UI with MUI (#28243) @mnajdova
    • โ€‹[core] Prepare for v5 stable release (#28240) @mnajdova
    • โ€‹[core] Mark lines that needs to be changed with a major release (#28238) @mnajdova
    • โ€‹[core] Various updates to what we consider the default branch (#28328) @eps1lon
    • โ€‹[core] Remove experimental bundle size tracking page (#28334) @eps1lon
    • โ€‹[core] Support release:build with cmd.exe (#28318) @michaldudak
    • โ€‹[core] Remove unnecessary titleize warning (#28349) @eps1lon
    • โ€‹[core] Batch small fixes (#28381) @oliviertassinari
    • โ€‹[test] Recommend yarn t over test:watch (#28254) @eps1lon
    • โ€‹[test] Lazily import fixtures (#28239) @eps1lon
    • โ€‹[test] Assert on user-select that has the same value across browsers (#28378) @eps1lon

    All contributors of this release in alphabetical order: @aghArdeshir, @Aurelain, @eps1lon, @goncalovf, @jedwards1211, @m4theushw, @mbrookes, @michaldudak, @mnajdova, @nikitabobers, @praveenkumar-kalidass, @siriwatknp, @sydneyjodon-wk, @tamboliasir1, @tholman, @zadeviggers, @ZeeshanTamboli

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-rc.1(Sep 8, 2021)

    Sep 8, 2021

    A big thanks to the 13 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ“š Improved the codemod and migration guide for upgrading to v5
    • ๐Ÿ› Fixed some bugs and regressions

    @mui/[email protected]

    • โ€‹[Autocomplete] Fix virtualization regression (#28129) @oliviertassinari
    • โ€‹[Button] Use deeper imports from unstyled, correct docs (#28074) @michaldudak
    • โ€‹[ButtonBase] Fix ripple persisting on blur (#28186) @michaldudak
    • โ€‹[Link] Infer ref type from component (#28101) @eps1lon
    • โ€‹[Popper] Fix bundle size regression (#27910) @oliviertassinari
    • โ€‹[Select] Merge ref of Select and input element (#28054) @DouglasPds
    • โ€‹[Tabs] Improve error message formatting for invalid value (#28172) @eps1lon

    @mui/[email protected]

    • โ€‹[system] Change type of return value of overridesResolver (#28220) @hbjORbj
    • โ€‹[system] Fix zero value condition (#28219) @siriwatknp
    • โ€‹[system] Shorten class names in production (#27932) @oliviertassinari

    @mui/[email protected]

    • โ€‹[codemod] Fix various reported issues on preset-safe (#28183) @mnajdova

    @mui/[email protected]

    • โ€‹[ClockPicker] Fix to narrow hover area for am hours in am/pm clock (#28207) @eps1lon
    • โ€‹[Masonry] Improve the styling on the demos (#27957) @hbjORbj
    • โ€‹[MasonryItem] Fix crash on unmount when using React 18 (#28202) @eps1lon


    • โ€‹[docs] Fixes makeStyles migration example (#28213) @RomarQ
    • โ€‹[docs] Fix some outdated migration guide (#28222) @siriwatknp
    • โ€‹[docs] Update previews (#28223) @eps1lon
    • โ€‹[docs] Demo how to use a specific slide direction for Snackbar (#28211) @goncalovf
    • โ€‹[docs] Improve docs for creating dark theme (#28104) @mnajdova
    • โ€‹[docs] Don't use Material theme in unstyled demos (#28073) @michaldudak
    • โ€‹[docs] Fix api doc import example (#28199) @siriwatknp
    • โ€‹[docs] Remove demo for re-creating Material-UI switches (#28042) @eps1lon
    • โ€‹[docs] Improve legibility of CTA on landing page (#28124) @akashshyamdev
    • โ€‹[docs] Fix Link outdated default underline prop (#28134) @outofgamut
    • โ€‹[docs] Fix branding theme leaking on the templates (#28120) @mnajdova
    • โ€‹[docs] Fix wrong package name in codemod (#28118) @aleccaputo
    • โ€‹[docs] Cancelled subscription @oliviertassinari
    • โ€‹[docs] Remove style duplication (#28087) @oliviertassinari
    • โ€‹[docs] Fix migration guide typo (#28113) @paullaros
    • โ€‹[docs] Reorder app bar actions (#28089) @mnajdova
    • โ€‹[docs] Support Material design theme in MarkdownElement (#28109) @eps1lon
    • โ€‹[docs] Improve diamond sponsors in the navigation (#28090) @mnajdova
    • โ€‹[docs] Remove unnecessary comma (#28072) @michaldudak
    • โ€‹[website] Add new careers page (#28184) @hbjORbj
    • โ€‹[website] Disable Next.js font optimization (#28128) @michaldudak
    • โ€‹[website] Polish design-kits & templates (#28131) @siriwatknp
    • โ€‹[website] Update utm referral params #28040 @siriwatknp


    • โ€‹[core] Misc bundle size tracking improvements (#28205) @eps1lon
    • โ€‹[core] Ensure code preview is valid JavaScript (#28215) @eps1lon
    • โ€‹[core] Create @mui/material-next package (#28200) @michaldudak
    • โ€‹[core] Rename directories to match the new package names (#28185) @mnajdova
    • โ€‹[core] Remove unused include (#28187) @eps1lon
    • โ€‹[core] Fix PR detection mechanism for upstream PRs (#28171) @eps1lon
    • โ€‹[core] Simplify ResizeObserver logic (#28037) @oliviertassinari
    • โ€‹[core] Include TS modules in rollup import resolution (#28094) @michaldudak
    • โ€‹[test] Update test to consider unsuppressed double render logs in React 18 (#28068) @eps1lon
    • โ€‹[typescript] Make types of componentsProps consistent (#27499) @michaldudak

    All contributors of this release in alphabetical order: @akashshyamdev, @aleccaputo, @DouglasPds, @eps1lon, @goncalovf, @hbjORbj, @michaldudak, @mnajdova, @oliviertassinari, @outofgamut, @paullaros, @RomarQ, @siriwatknp

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-rc.0(Sep 2, 2021)

    Sep 1, 2021

    A big thanks to the 18 contributors who made this release possible. Here are some highlights โœจ:

    • ๐ŸŽ‰ Renamed packages to @mui/* as part of rebranding the company, following the strategy of expanding the library scope beyond Material Design. For more details about it, check the GitHub discussion.

    • ๐Ÿ›  Added mui-replace codemod for migrating @material-ui/* to new packages @mui/*. Check out this codemod detail or head to migration guide

    • ๐Ÿงช Added new <Mansory> component to the lab, check it out. It has been crafted by our first intern, @hbjORbj ๐Ÿ‘!

    @mui/[email protected]

    Breaking changes

    • โ€‹[core] Rename packages (#28049) @mnajdova

      replace @material-ui/* prefix with @mui/*:

      @material-ui/system -> @mui/system
      @material-ui/styles -> @mui/styles
      @material-ui/lab -> @mui/lab
      @material-ui/types -> @mui/types
      @material-ui/styled-engine -> @mui/styled-engine
      @material-ui/styled-engine-sc ->@mui/styled-engine-sc
      @material-ui/private-theming -> @mui/private-theming
      @material-ui/codemod -> @mui/codemod

      except these 3 packages that are renamed.

      @material-ui/core => @mui/material        // represents Material Design components.
      @material-ui/icons => @mui/icons-material // represents Material Design icons.
      @material-ui/unstyled => @mui/core        // fully functional components and hooks with no/minimum styles.

      Note: @mui/core (previously @material-ui/unstyled) is not the same as @material-ui/core.

      We encourage you to use the codemod for smooth migration.


    • โ€‹[Autocomplete] Update warning for value prop (#27977) @vedadeepta
    • โ€‹[ButtonGroup] Update PropTypes to match augmentable interface (#27944) @aaronlademann-wf
    • โ€‹[CardMedia] Add image role if image prop is specified but no image component is specified (#27676) @eps1lon
    • โ€‹[InputBase] Fix autofill issue (#28070) @mnajdova
    • โ€‹[Tabs] Fix indicator position when tab size changes (ResizeObserver) (#27791) @hbjORbj
    • โ€‹[TextareaAutosize] Sync height when the width of the textarea changes (#27840) @hbjORbj
    • โ€‹[ToggleButtonGroup] Add "disabled" prop (#27998) @chetas411
    • โ€‹[core] Export types for module augmentation (#28078) @m4theushw

    @mui/[email protected]

    • โ€‹[Button] Create ButtonUnstyled and useButton (#27600) @michaldudak

    @mui/[email protected]

    • โ€‹[Masonry] Add new component (#27439) @hbjORbj

    @mui/[email protected]

    • โ€‹[codemod] Add mui-replace codemod transform (#28060) @siriwatknp


    • โ€‹[docs] Fix preview for multiline JSX attributes (#28092) @eps1lon
    • โ€‹[docs] Add a recommendation for hoisting GlobalStyles to static constant (#28088) @mnajdova
    • โ€‹[docs] Update toolbar menu to behave closer to default (#28086) @oliviertassinari
    • โ€‹[docs] Markdown redesign polish (#27956) @mnajdova
    • โ€‹[docs] Fully translated /api/* pages (#28044) @eps1lon
    • โ€‹[docs] Fix matchSorter import path in Autocomplete (#28063) @StefanBRas
    • โ€‹[docs] Fix Fab demo overflow on mobile (#28033) @rajzik
    • โ€‹[docs] Add notistack example compatible with v5.x.x (#27881) @iamhosseindhv
    • โ€‹[docs] Change sign-up template autocomplete to use "new-password" (#28028) @StefanTobler
    • โ€‹[docs] Improve the support expectations for developers (#27999) @oliviertassinari
    • โ€‹[docs] Don't use nested ternary (#27986) @eps1lon
    • โ€‹[docs] Sync redirections from X into Core @oliviertassinari
    • โ€‹[docs] Fix typo '.MuiOutinedInput' -> '.MuiOutlinedInput' (#27997) @rsxdalv
    • โ€‹[docs] fix floating action button broken demo (#27976) @rajzik
    • โ€‹[docs] Update correct variable name (#27960) @bene-we
    • โ€‹[docs] Fix Performance typo (#27965) @tdmiller1
    • โ€‹[docs] Add GridExportCSVOptions page to documentation pages (#27951) @flaviendelangle
    • โ€‹[website] Add product core page (#27952) @siriwatknp
    • โ€‹[website] Make AppBar height and border consistent with nav header (#28085) @michaldudak
    • โ€‹[website] Fix typos in the rebranding (#28069) @oliviertassinari
    • โ€‹[website] Refine home, pricing and about pages (#27927) @siriwatknp


    • โ€‹[eslint-plugin-material-ui] Only require translation of word characters and not API (#28043) @eps1lon
    • โ€‹[core] Use lintable pattern for debounced callbacks (#27985) @eps1lon
    • โ€‹[core] Remove file-wide disables of no-use-before-define (#27984) @eps1lon
    • โ€‹[core] Improve release:changelog script (#27941) @eps1lon
    • โ€‹[core] Enforce curly braces for block statements (#27946) @eps1lon
    • โ€‹[test] Disable browserstack for PRs (#28041) @eps1lon

    All contributors of this release in alphabetical order: @aaronlademann-wf, @bene-we, @chetas411, @eps1lon, @flaviendelangle, @hbjORbj, @iamhosseindhv, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @rajzik, @rsxdalv, @siriwatknp, @StefanBRas, @StefanTobler, @tdmiller1, @vedadeepta

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-beta.5(Aug 25, 2021)

    Aug 24, 2021

    A big thanks to the 26 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ› Fixed a lot of bugs and regressions to get us closer to the v5 stable release milestone
    • ๐Ÿ“š Improved the docs and the migration guide for upgrading to v5

    @material-ui/[email protected]

    Breaking changes

    • [core] Update `.browserslistrc` file (#27788) @DanailH

      The targets of the default bundle have changed:

      • Chrome 90 (up from 84)
      • Edge 91 (up from 85)
      • Safari 14 (macOS) (up from 13.1) and 12.4 (iOS) (up from 12.2)
      • Opera 76 (up from 70)
    • [Autocomplete] Rename Value type to AutocompleteValue (#27804) @michaldudak

      The useAutocomplete hook used a type called Value. It was a very generic name for a type specific to the Autocomplete control, so it was removed to AutocompleteValue.

      -import { Value } from '@material-ui/core/useAutocomplete';
      +import { AutocompleteValue } from '@material-ui/core/useAutocomplete';


    • [AppBar] Fix transparency issue on dark mode (#27281) @will-amaral
    • Revert "[BottomNavigation] onClick does not fire if tapped while scrolling (#22524)" (#27690) @eps1lon
    • [Autocomplete] Add verbose warning for defaultValue (#27925) @vedadeepta
    • [Badge] Add missing classes to exported class object (#27943) @pvdstel
    • [ButtonGroup] Allow `size` customization via module augmentation (#27834) @aaronlademann-wf
    • [InputBase] Preserve host state when changing `rows` from undefined to defined (#27683) @eps1lon
    • [InputLabel] Apply `asterisk` class when `required` (#27738) @alexile
    • [Select] Fix NativeSelect propagating classes to the DOM element (#27797) @mnajdova
    • [Stack] Match the customization standard (#27777) @oliviertassinari
    • [SvgIcon] Apply custom color if defined in the theme (#27923) @eps1lon
    • [Switch] Add optional `track` slot to SwitchUnstyled (#27916) @michaldudak
    • [Tooltip] Fix broken arrow position in rtl (#27868) @mnajdova
    • [transitions] Allow to run Slide into a custom container (#26623) @benny0642

    @material-ui/[email protected]

    Breaking changes

    • [system] Rename `styleProps` to `ownerState` (#27830) @mnajdova

      The change was done in order to better reflect what they are, not what we think they will be used for.

      -  styleProps={propsAndState}
      +  ownerState={propsAndState}


    • [system] Remove dependency on `overridesResolver` for the `variants` (#27859) @mnajdova
    • [system] Forward `classes` prop if no slot specified in the options (#27795) @mnajdova
    • [system] Fix pseudo class overridden in variants (#27847) @hbjORbj

    @material-ui/[email protected]

    • [icons] Improve GitHub size (#27740) @oliviertassinari

    @material-ui/[email protected]

    • [styled-engine] Remove unecessary aliases (#27779) @oliviertassinari
    • [styled-engine] Drop withComponent support (#27780) @oliviertassinari

    @material-ui/[email protected]

    • [core] Utilize `CSS.supports` in `SliderUnstyled` component (#27724) @DanailH

    @material-ui/[email protected]

    • [DatePicker] Fix click-away logic requiring second click in some cases (#24877) @eps1lon
    • [lab] Use the public API for module augmentation (#27735) @oliviertassinari
    • [Timeline] Fix color="inherit" on TimelineDot (#27794) @mnajdova


    • [docs] Redesign on markdown page (#27860) @mnajdova
    • [docs] Split changelog into current and old (#27942) @eps1lon
    • [docs] Migration, emphasize theme structure change (#27935) @oliviertassinari
    • [docs] Fix missing `href` for AppDrawerNavItems (#27936) @eps1lon
    • [docs] Pass window of iframe to framed demos (#27924) @eps1lon
    • [docs] Simplify Select Chip demo styling (#27864) @LorenzHenk
    • [docs] Move from Redux to React Context (#27828) @eps1lon
    • [docs] Correct the useAutocomplete import path (#27805) @michaldudak
    • [docs] Fix Tooltip flicker when hovering between code icon and demo (#27841) @eps1lon
    • [docs] Don't log if a request was aborted in ServerRequestDatePicker demo (#27843) @eps1lon
    • [docs] Fix false-positive useToolbar warning when using the demo toolbar menu (#27842) @eps1lon
    • [docs] Add missing import (#27850) @nguyenyou
    • [docs] Fix circular integration demo (#27856) @LorenzHenk
    • [docs] A few examples is enough (#27874) @mekouar-mehdi
    • [docs] Improve (#27852) @surajkumar016
    • [docs] Fix rtl issue on the demos (#27865) @mnajdova
    • [docs] Apply the new branding theme and do the AppBar redesign (#27789) @mnajdova
    • [docs] Improve grammar in 'Align list items' section (#27730) @atorenherrinton
    • [docs] Make API documentation tables horizontally scrollable (#27787) @jakeanq
    • [docs] Fix typo on "Customized dialogs" section (#27827) @nomanoff
    • [docs] Fix Autocomplete country layout shift (#27814) @oliviertassinari
    • [docs] Improve accessible labels for Card demos (#27675) @eps1lon
    • [docs] Run in StrictMode by default (#27693) @eps1lon
    • [docs] Display TypeScript code of demo if requested (#27691) @eps1lon
    • [docs] Use country image instead of emoji (#27723) @qiweiii
    • [docs] Zero runtime themeAugmentation documentation (#27706) @eps1lon
    • [docs] Fix MobileTextStepper example to match description (#27682) @nolastemgarden
    • [docs] Document the transfer-list limitations (#27783) @oliviertassinari
    • [docs] Move TypeScript docs in context (#27782) @oliviertassinari
    • [docs] Prefer linking API source TypeScript (#27781) @oliviertassinari
    • [docs] Improve the Modal onClose migration (#27775) @oliviertassinari
    • [docs] Fix outdated styled-engine docs (#27778) @oliviertassinari
    • [docs] Improve right to left guide (#27713) @mnajdova
    • [docs] Consistent line break (#27728) @oliviertassinari
    • [docs] Don't dispatch ignored "reset code variant" actions (#27712) @eps1lon
    • [docs] Fix sentence to be more grammatically correct (#27733) @atorenherrinton
    • [examples] Add code sandbox config with node version (#27798) @qiweiii
    • Revert "[examples] Fix nextjs with styled-components example (#27583)" (#27921) @mnajdova
    • Revert "[examples] Update create-react-app examples with styled-components to use package aliases (#27591)" (#27917) @mnajdova
    • [I10n] Add Khmer (kh-KH) locale support (#27915) @teachhay
    • [website] Add templates & design-kits page (#27811) @siriwatknp
    • [website] Improve rebranding homepage performance (#27838) @siriwatknp
    • [website] Honest a11y value proposition (#27826) @eps1lon
    • [website] Improve homepage rebranding (#27663) @siriwatknp
    • [website] A few polish (#27741) @oliviertassinari
    • [website] Polish homepage (#27930) @oliviertassinari


    • [core] Fix various flip: false regressions (#27920) @mnajdova
    • [core] Fix typo in code comment (#27818) @hamidreza-nateghi
    • [core] Fix typos in repository (#27785) @JEONGJIHUN
    • [test] Current behavior when disabling components variants (#27376) @noviicee
    • [tests Improve test for checking if classes is forwarded to any DOM element (#27815) @mnajdova
    • [tests] Replace legacy `describeConformance` with `describeConformanceV5` (#27817) @mnajdova

    All contributors of this release in alphabetical order: @aaronlademann-wf, @alexile, @atorenherrinton, @benny0642, @DanailH, @eps1lon, @hamidreza-nateghi, @hbjORbj, @jakeanq, @JEONGJIHUN, @LorenzHenk, @mekouar-mehdi, @michaldudak, @mnajdova, @nguyenyou, @nolastemgarden, @nomanoff, @noviicee, @oliviertassinari, @pvdstel, @qiweiii, @siriwatknp, @surajkumar016, @teachhay, @vedadeepta, @will-amaral

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-beta.4(Aug 13, 2021)

    Aug 13, 2021

    Big thanks to the 19 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ› Grid's "auto" behavior has been fixed (#27514) @aaronlademann-wf
    • โ™ฟ An important bug with the keyboard navigation in MenuList was fixed (#27526) @ryancogswell

    @material-ui/[email protected]

    Breaking changes

    • [Grid] Fix "auto" behavior to match natural width of its content (#27514) @aaronlademann-wf


    • [ButtonBase] Fix tabIndex type (#27684) @kylegach
    • [MenuList] Fix text navigation (#27526) @ryancogswell
    • [l10n] Add Arabic Sudan (ar-SD) locale (#27588) @YassinHussein
    • [Radio] Fix size prop forwarding with custom icons (#27656) @DouglasPds
    • [TextField] Password visibility icons ( "visibility" โ‡” "visibility-off" ) should be reversed (#27507) @tonextone
    • [ToggleButton] Fix handling of color prop (#27635) @oliviertassinari

    @material-ui/[email protected]

    • [codemod] Fix filename case sensitive duplicate @oliviertassinari

    @material-ui/[email protected]

    • [StyledEngineProvider] Remove unnecessary emotion cache export (#27680) @garronej
    • [system] Fix missing filterProps in compose type (#27618) @R-Bower

    @material-ui/[email protected]

    • [CalendarPicker] Improve contrast between enabled and disabled days (#27603) @nikitabobers
    • [PickersDay] Render `children` if specified (#27462) @abriginets
    • [TreeView] Fix TreeItem label overflow (#27585) @LorenzHenk


    • [docs] Update guides for @material-ui/styled-engine-sc installation (#27602) @mnajdova
    • [docs] Document that @material-ui/styles is not strict mode compatible (#27639) @oliviertassinari
    • [docs] Link to "Customization of Theme" from relevant theme interfaces (#27689) @eps1lon
    • [docs] Update CSP page (#27627) @mnajdova
    • [docs] Reorder and rename "enforce value" ToggleButton demo (#27678) @LorenzHenk
    • [docs] Fix missing dependency in the DataGrid demo (#27597) @m4theushw
    • [docs] img should have a src attribute (#27632) @oliviertassinari
    • [docs] Add badges to Transfer List (#27634) @oliviertassinari
    • [docs] Recommend the `direct-import` babel plugin over `transform-import` (#27335) @umidbekk
    • [docs] Remove unused code (#27711) @eps1lon
    • [docs] Improve virtualization demo (#27340) @vedadeepta
    • [examples] Include a follow-up on the example (#27620) @matiasherranz
    • [website] Add about page (#27599) @siriwatknp
    • [website] Add pricing page (#27598) @siriwatknp


    • [core] Batch small changes (#27636) @oliviertassinari
    • [core] Change range strategy to bump (#27652) @oliviertassinari
    • [core] Fix visual regression example images (#27660) @eps1lon
    • [core] Remove diff when running yarn docs:dev (#27720) @eps1lon
    • [core] Remove mocks of require.context in markdown loader (#27406) @eps1lon
    • [core] Reduce use CSS when Checkbox disableRipple is set (#27568) @oliviertassinari
    • [test] Add coverage for jss-to-styled prefix from filename (#27522) @eps1lon
    • [test] Add current behavior for a11y name vs visible name for PickersDay (#27661) @eps1lon
    • [test] Dodge double logging in dev mode (#27653) @oliviertassinari
    • [test] Enable skipped test fixed by upstream React fix (#27615) @eps1lon
    • [theme] Add missed variants in Components interface (#27453) @nikitabobers

    All contributors of this release in alphabetical order: @aaronlademann-wf, @abriginets, @DouglasPds, @eps1lon, @garronej, @kylegach, @LorenzHenk, @m4theushw, @matiasherranz, @mnajdova, @nikitabobers, @oliviertassinari, @R-Bower, @ryancogswell, @siriwatknp, @tonextone, @umidbekk, @vedadeepta, @YassinHussein

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-beta.3(Aug 9, 2021)

    Aug 9, 2021

    Big thanks to the 15 contributors who made this release possible. Here are some highlights โœจ:

    • โœจ jss-to-styled codemod has been improved to support createStyles (TypeScript) and <React.Fragment> use (#27578) @mnajdova
    • ๐Ÿฆด Isolate useAutocomplete into the unstyled package (#27485) @michaldudak

    @material-ui/[email protected]

    • [Modal] Restore `overflowX` and `overflowY` styles (#27487) @PCOffline
    • [Modal] Remove unnecessary check for children.props.tabIndex (#27374) @noviicee
    • [Select] Fix regression for icon not rotating (#27511) @mnajdova

    @material-ui/[email protected]

    • [system] Added top, left, right and bottom border color CSS properties to system (#27580) @R-Bower

    @material-ui/[email protected]

    • [codemod] Add support for `createStyles` use in `jss-to-styled` (#27578) @mnajdova
    • [codemod] Fix `jss-to-styled` PREFIX generation on Windows (#27491) @mnajdova
    • [codemod] Fix `jss-to-styled` codemod to handle React.Fragment as root (#27495) @mnajdova

    @material-ui/[email protected]

    • [FormControl] Create FormControlUnstyled (#27240) @michaldudak
    • [Autocomplete] Move useAutocomplete to the Unstyled package (#27485) @michaldudak


    • [docs] Fix layout shift when opening hash anchor (#27619) @oliviertassinari
    • [docs] Add TypeScript guide for the `sx` prop (#27417) @mnajdova
    • [docs] Hardcode listed colors in /customization/color/#playground (#27446) @eps1lon
    • [docs] Bring back Select#onChange signature API (#27443) @eps1lon
    • [docs] Remove backticks in the title (#27567) @oliviertassinari
    • [docs] Fix 404 links (#27566) @oliviertassinari
    • [docs] Use the same h2 for the customization demos (#27569) @oliviertassinari
    • [docs] Fix syntax error in v5 migration `styled` api example (#27518) @kimbaudi
    • [docs] Improve SSR configuration with emotion (#27496) @frandiox
    • [docs] Change "pseudo-classes" to "state classes" (#27570) @michaldudak
    • [docs] Add StackBlitz edit demo integration (#27391) @sulco
    • [docs] Remove unnecessary generic argument (#27516) @bezpalko
    • [docs] Add customization demos (#27411) @siriwatknp
    • [docs] Restore initial descriptionRegExp logic (#27436) @oliviertassinari
    • [docs] Polish jss-to-styled docs (#27457) @oliviertassinari
    • [examples] Fix nextjs with styled-components example (#27583) @mnajdova
    • [examples] Update create-react-app examples with styled-components to use package aliases (#27591) @mnajdova
    • [examples] Improve integration examples with Next.js (#27331) @Harshita-Kanal
    • [website] Add spicefactory as gold sponsor @oliviertassinari
    • [website] Homepage rebranding (#27488) @siriwatknp
    • [website] Add Flavien to team and about pages (#27575) @flaviendelangle
    • [website] Add Ryan to Community contributors for Stack Overflow contributions (#27529) @ryancogswell
    • [website] Add references section to home (#27444) @siriwatknp


    • [core] rebaseWhen=auto does not seem to work (#27565) @oliviertassinari
    • [core] Improve instructions for the @material-ui/styles migration (#27466) @mnajdova
    • [core] Batch small changes (#27435) @oliviertassinari
    • [core] Receive patch and minor dependency updates (#27455) @eps1lon
    • [test] Update coverage to include all @material-ui packages (#27521) @eps1lon
    • [test] Lint codemod tests (#27519) @eps1lon
    • [test] Allow tests to run for 6s before timeout (#27456) @oliviertassinari

    All contributors of this release in alphabetical order: @bezpalko, @eps1lon, @flaviendelangle, @frandiox, @Harshita-Kanal, @kimbaudi, @michaldudak, @mnajdova, @noviicee, @oliviertassinari, @PCOffline, @R-Bower, @ryancogswell, @siriwatknp, @sulco

    Source code(tar.gz)
    Source code(zip)
  • v4.12.3(Jul 30, 2021)

    @material-ui/[email protected]

    • [Accordion] Fix AccordionSummary false-positive propType warning with `disableGeneration` (#27385) @eps1lon
    • [ImageList] Fix deprecation warnings (#27502) @mnajdova
    • [Table] Re-introduce deprecated TablePagination `onChangePage` to `ActionsComponent` (#27407) @eps1lon
    • [TextareaAutosize] Updated deprecation warning to suggest minRows instead of rowsMin (#27398) @HumbertoL


    • [docs] Fix 404 link to ImageList @oliviertassinari
    • [docs] Fix DataTable.tsx demo in v4 (#27196) @Siv-tspab


    • [core] Add release scripts (#27399) @eps1lon

    All contributors of this release in alphabetical order: @eps1lon, @mnajdova, @HumbertoL, @oliviertassinari, @Siv-tspab

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-beta.2(Jul 26, 2021)

    Jul 26, 2021

    Big thanks to the 20 contributors who made this release possible. Here are some highlights โœจ:

    • โœจ We introduced a new codemod for converting JSS styles to emotion (#27292) @siriwatknp It should help the adoption of v5, by making possible the removal of JSS sooner.
    • ๐Ÿ› The majority of other changes in this release were bug fixes, test utilities, and docs.

    @material-ui/[email protected]

    • [Autocomplete] Explain how the loading prop works (#27416) @michaldudak
    • [Autocomplete] Update input value when the input changes (#27313) @turtleseason
    • [Autocomplete] Popper is not closing when the Autocomplete is disabled (#27312) @Goodiec
    • [Checkbox] Skip default hover styles with `disableRipple` (#27314) @faan234
    • [Dialog] Fix override paper styles (#27423) @newsiberian
    • [Grid] Remove width prop for rowSpacing (#27326) @sashkopavlenko
    • [Input] Merge `componentsProps` correctly (#27371) @mnajdova
    • [Pagination] Fixed usePagination requires @emotion in development mode (#27348) @ruppysuppy
    • [Pagination] Fix :hover effect on previous/next button (#27304) @Aubrey-Li
    • [Popper] Consistent timing of popper instance creation (#27233) @eps1lon
    • [Select] Add `SelectChangeEvent` for accurate types for event in onChange prop (#27370) @eps1lon
    • [Tabs] Use theme transition duration for the Tab animation (#27303) @florianbepunkt
    • [TextField] Allow custom colors in FormLabel (#27337) @oliviertassinari
    • [TextField] Fix name of componentsProps (#27338) @oliviertassinari
    • [transitions] Make sure inline styles used for transition values if declared (#27140) @eps1lon

    @material-ui/[email protected]

    • [codemod] Add `optimal-imports` for v5 (#27404) @mnajdova
    • [codemod] Add jss to emotion codemod (#27292) @siriwatknp
    • [codemod] Fix running codemod CLI on Windows (#27395) @michaldudak
    • [codemod] Fix published version (#27384) @eps1lon
    • [codemod] Improve (#27257) @mnajdova

    @material-ui/[email protected]

    • [NoSsr] Move NoSsr to the Unstyled package (#27356) @michaldudak

    @material-ui/[email protected]

    • [utils] Convert createChainedFunction to TypeScript (#27386) @eps1lon

    @material-ui/[email protected]

    • [system] Compute display name of `styled` component if `name` isn't set (#27401) @eps1lon
    • [system] Adds missing type for `shouldForwardProp` (#27310) @KLubin1

    @material-ui/[email protected]

    • [pickers] Only accept dates from adapters in min/max props (#27392) @eps1lon
    • [pickers] Fallback to today if all possible dates are disabled (#27294) @eps1lon
    • [pickers] Minify error when LocalizationProvider is missing (#27295) @eps1lon
    • [pickers] Fix Fade animation behavior change (#27283) @oliviertassinari


    • [docs] Display Popper arrow correctly (#27339) @Patil2099
    • [docs] Focus pickers introduction on Material-UI (#27394) @eps1lon
    • [docs] Fix wrong import path in @material-ui/styles section (#27427) @WeldonTan
    • [docs] Update color imports (#27321) @siriwatknp
    • [docs] Sync params of callbacks between types and JSDoc description (#27366) @eps1lon
    • [docs] Add migration note for synthetic native events in onChange (#27368) @eps1lon
    • [docs] Improve unstyled docs (#27382) @oliviertassinari
    • [docs] Update `Transitions` page (#27319) @siriwatknp
    • [docs] Add Unstyled components docs page (#27158) @michaldudak
    • [docs] Fix app bar regression (#27373) @mnajdova
    • [docs] Update migration guide to have a section on nested classes (#27354) @mnajdova
    • [docs] Convert App* components to emotion (#27150) @eps1lon
    • [docs] Fix duplicate "Theme" header (#27353) @eps1lon
    • [docs] Remove horizontal scrollbar in MiniDrawer (#27055) @AlvesJorge
    • [docs] Add `makeStyles` explanation in troubleshooting (#27322) @siriwatknp
    • [docs] Fix ExpansionPanel migration notes (#27352) @eps1lon
    • [docs] Transpile markdown files (#27349) @eps1lon
    • [docs] Fix typo in the word typography (#27329) @tudi2d
    • [docs] Use actual symbol of kilogram (#27332) @getsnoopy
    • [docs] Make migration doc easier to follow (#26948) @siriwatknp
    • [examples] Cleanup `gatsby` examples (#27375) @mnajdova
    • [examples] Create nextjs example using styled-components (#27088) @hboylan
    • [examples] Update gatsby example to use custom plugin (#27357) @mnajdova


    • [core] Remove obsolete styles documentation (#27350) @eps1lon
    • [core] Fix GitHub language detection (#27298) @oliviertassinari
    • [test] Include coverage report of browser tests (#27389) @eps1lon
    • [test] Add current behavior for getDisplayName with context components (#27402) @eps1lon
    • [test] Enable skipped picker tests (#27268) @eps1lon
    • [website] Add hero section to homepage (#27364) @siriwatknp

    All contributors of this release in alphabetical order: @AlvesJorge, @Aubrey-Li, @eps1lon, @faan234, @florianbepunkt, @g etsnoopy, @Goodiec, @hboylan, @KLubin1, @michaldudak, @mnajdova, @newsiberian, @oliviertassinari, @Patil2099, @ruppysupp y, @sashkopavlenko, @siriwatknp, @tudi2d, @turtleseason, @WeldonTan

    Source code(tar.gz)
    Source code(zip)
  • v4.12.2(Jul 19, 2021)

    @material-ui/[email protected]

    • [Accordion, Collapse] Fix failed proptype error (#27307) @serenalin121
    • [Accordion] Ensure AccordionSummary backwards compatible deprecation of classes.focused (#27351) @eps1lon
    • [TextField] Add support for `minRows` (#27293) @eps1lon


    • [blog] Danilo Leal joins Material-UI (#27231) @oliviertassinari
    • [blog] Jun did join in Q1 @oliviertassinari
    • [blog] Fix typo @oliviertassinari
    • [blog] Q2 2021 Update (#27089) @oliviertassinari
    • [docs] Add constant for the banner height (#27309) @mnajdova
    • [docs] Fix various layout issues with the v5 banner (#27237) @mnajdova
    • [docs] Fix https protocol (#27262) @m4theushw
    • [docs] Remove Ethical Ads (#27173) @mbrookes
    • [website] Open 4 new roles (#27123) @oliviertassinari

    All contributors of this release in alphabetical order: @eps1lon, @m4theushw, @mbrookes, @mnajdova, @oliviertassinari, @serenalin121

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-beta.1(Jul 14, 2021)

    Jul 14, 2021

    Big thanks to the 17 contributors who made this release possible. Here are some highlights โœจ:

    • โœจ We have introduced a new unstyled component: the Switch (#26688) @michaldudak You can find two new versions of the Switch. A component without any styles: SwitchUnstyled, and a hook: useSwitch.


      You can follow our progress at

    • ๐Ÿ’„ We have updated the default info success warning color to be more accessible (#26817) @siriwatknp. You can find the new default values in the documentation.


    @material-ui/[email protected]

    Breaking changes

    • [Fab] Remove no longer necessary span wrapper (#27112) @siriwatknp
    • [ToggleButton] Remove no longer necessary span wrapper (#27111) @siriwatknp


    • [Autocomplete] Add componentsProps (#27183) @michal-perlakowski
    • [Avatar] Fix support for crossOrigin (#27013) @ShirasawaSama
    • [ButtonBase] Correct disableRipple API description (#27187) @michaldudak
    • [ButtonGroup] Add color palette types (#27215) @ShirasawaSama
    • [SwitchBase] Bring back checked and mark as deprecated (#27047) @siriwatknp
    • [TextField] Remove redundant useFormControl implementation (#27197) @michaldudak
    • [theme] Add missing MuiRating types to components.d.ts (#27086) @rajzik
    • [theme] Remove createV4Spacing from adaptV4Theme (#27072) @siriwatknp
    • [theme] Update default info success warning color (#26817) @siriwatknp
    • [ToggleButton] Add color palette types (#27046) @ShirasawaSama
    • [ToggleButton] Fix the api page (#27164) @oliviertassinari

    @material-ui/[email protected]

    • [Switch] Create SwitchUnstyled and useSwitch (#26688) @michaldudak

    @material-ui/[email protected]

    • [codemod] Add v5 important migration (#27032) @siriwatknp
    • [codemod] Fix v5 codemods on Windows (#27254) @michaldudak

    @material-ui/[email protected]

    • [Box] Add breakpoint value support to maxWidth prop (#26984) @ansh-saini

    @material-ui/[email protected]

    • [CalendarPicker] Fix slide transition regression (#27273) @eps1lon
    • [CalendarPicker] Use transition components from core instead of a custom implementation (#27043) @eps1lon
    • [pickers] Fix default value of text keys (#26990) @oliviertassinari
    • [TimePicker] Change default minutes and seconds to zero (#27037) @michal-perlakowski


    • [blog] Q2 2021 Update (#27089) @oliviertassinari
    • [docs] Add information that the label prop in FormControlLabel is now @michal-perlakowski
    • [docs] Don't crash page if an Ad crashes (#27178) @eps1lon
    • [docs] Fix alt description of movavi backer @oliviertassinari
    • [docs] Fix import source of hidden component (#27116) @vimutti77
    • [docs] Fix layout regression (#27272) @oliviertassinari
    • [docs] Fix syntax error in /styles/api markdown (#27176) @sahil-blulabs
    • [docs] Fix the link for the sx props page (#27202) @mnajdova
    • [docs] Fix theme context example code (#27053) @moshfeu
    • [docs] Fix typo in (#27218) Ayush Dubey
    • [docs] Fix typos (#27074) @michaldudak
    • [docs] Improve nav semantics (#27138) @eps1lon
    • [docs] Migrate Ad* components to emotion (#27159) @mnajdova
    • [docs] Migrate rest of the docs to emotion (#27184) @mnajdova
    • [docs] Move versions from _app PageContext to page-specific context (#27078) @eps1lon
    • [docs] Only bundle one version of the demos in production (#27020) @eps1lon
    • [docs] Reduce layout shift on landing page (#27251) @eps1lon
    • [docs] Remove Ethical Ads (#27173) @mbrookes
    • [docs] Remove unused fs polyfill (#27069) @eps1lon
    • [docs] Remove usage of url package (#27151) @eps1lon
    • [docs] Replace react-text-mask with react-imask in integration example (#27071) @michal-perlakowski
    • [docs] Sort the size in a more logical order (#27186) @oliviertassinari
    • [docs] Use actual link to paperbase (#27063) @eps1lon
    • [docs] Use custom markdown loader for landing page (#27065) @eps1lon
    • [docs] Use webpack 5 (#27077) @eps1lon
    • [examples] Fix CDN warning (#27229) @oliviertassinari
    • [examples] Remove StyledEngineProvider as JSS is not used (#27133) @mnajdova
    • [examples] Remove forgotten StyledEngineProvider (#27163) @oliviertassinari


    • [core] Batch small changes (#26970) @oliviertassinari
    • [core] Configure Renovate (#27003) @renovate[bot]
    • [core] Migrate remaining mentions of Dependabot to Renovate (#27118) @eps1lon
    • [core] Run yarn deduplicate on Renovate updates (#27115) @eps1lon
    • [test] Document broken React 18 behavior of Autocomplete (#27242) @eps1lon
    • [test] Increase BS timeout to 6min (#27179) @oliviertassinari
    • [test] Migrate regressions to emotion (#27010) @vicasas
    • [test] Narrow down React 18 compat issues (#27134) @eps1lon
    • [test] Remove StyledEngineProvider usage from regressions and e2e test @mnajdova
    • [test] Run React 18 integration tests with new createRoot API (#26672) @eps1lon
    • [test] Update tests with latest state of StrictMode compatibility (#27042) @eps1lon
    • [test] Use DOM events instead of mocked, partial events (#27198) @eps1lon
    • [website] Open 4 new roles (#27123) @oliviertassinari
    • [blog] Danilo Leal joins Material-UI (#27231) @oliviertassinari

    All contributors of this release in alphabetical order: @eps1lon, @mbrookes, @michal-perlakowski, @michaldudak, @mnajdova, @moshfeu, @oliviertassinari, @rajzik, @renovate[bot], @sahil-blulabs, @ShirasawaSama, @siriwatknp, @vimutti77

    Source code(tar.gz)
    Source code(zip)
  • v4.12.1(Jul 7, 2021)

    This release is released to fix the package.json generation in the previous release.


    • [core] Fix generation of package.json file on Windows (#27160) @mnajdova
    Source code(tar.gz)
    Source code(zip)
  • v4.12.0(Jul 6, 2021)

    Big thanks to the 12 contributors who made this release possible. It includes deprecations that should help developers to have an easier adoption of v5.

    @material-ui/[email protected]

    • [Accordion] Deprecate classes.focused (#24083) @oliviertassinari
    • [Avatar] Change default variant and adjust deprecation message (#25549) @michal-perlakowski
    • [Badge] Add overlap circular and rectangular (#22076) @eps1lon
    • [ButtonBase] Add warning for buttonRef removal (#25897) @m4theushw
    • [Collapse] Deprecate classes.container (#24084) @oliviertassinari
    • [Collapse] Deprecate collapsedHeight (#24079) @oliviertassinari
    • [Dialog] Add deprecation warning for withMobileDialog (#23570) @RDIL
    • [Dialog] Deprecate the transition onX props (#22114) @mbrookes
    • [Fab] Deprecate variant="round" (#24080) @oliviertassinari
    • [Grid] Add deprecation for justify prop rename (#24078) @oliviertassinari
    • [Grid] Fix justifyContent="flex-start" prop types (#24788) @DukeManh
    • [GridList] Rename to ImageList & add deprecation warnings (#22363) @mbrookes
    • [Icons] Deprecate fontSize value of default, add medium (#23971) @mbrookes
    • [Menu] Deprecate transition onX props (#22213) @mbrookes
    • [Modal][Dialog] Deprecate duplicate props with onChange (#24081) @oliviertassinari
    • [Modal][Portal] Deprecate onRendered (#24082) @oliviertassinari
    • [Popover] Deprecate transition onX props (#22202) @mbrookes
    • [RootRef] Deprecate component (#24075) @oliviertassinari
    • [Snackbar] Deprecate transition onX props (#22206) @mbrookes
    • [Table] Add deprecation for renamed TablePagination props (#23789) @mnajdova
    • [Table] Deprecate padding="default" (#25990) @m4theushw
    • [TextareaAutosize] Deprecate rowsMax->maxRows & rowsMin->minRows (#23530) @mhayk
    • [TextField] Add isRequired to position prop in InputAdornment (#25912) @m4theushw
    • [theme] Deprecate theme.mixins.gutters (#22245) @joshwooding
    • [theme] Deprecate fade color utility in favor of alpha (#22837) @mnajdova
    • [theme] Deprecate createMuiTheme (#26004) @m4theushw
    • [theme] Add warning for theme.typography.round deprecation (#25916) @m4theushw
    • [theme] Add warning for theme.breakpoints.width deprecation (#25993) @m4theushw

    @material-ui/[email protected]

    • [Box] Deprecate css prop in favor of sx (#23480) @mnajdova


    • [blog] Michaล‚ Dudak joins Material-UI (#26700)
    • [blog] Siriwat Kunaporn joins Material-UI (#26329) @oliviertassinari
    • [docs] Add gold sponsor (#26968)
    • [docs] Add v5 banner (#27070)
    • [docs] Fix 404 link (Evergreen Box) (#26430) @k-utsumi
    • [docs] Prepare for data grid auto-generated docs (#26477) @m4theushw
    • [docs] Update to non-deprecated fontsource (#26082) @kiwimahk
    • [website] Add careers page for intern (#26280) @mnajdova
    • [website] Add open application section (#26501) @oliviertassinari


    • [test] Deprecate test-utils (#24099) @eps1lon
    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-beta.0(Jul 1, 2021)

    Jul 01, 2021

    Big thanks to the 13 contributors who made this release possible. Here are some highlights โœจ:

    • ๐ŸŽ‰ This is the first beta release of v5! A huge thanks to everyone who helped to make this happen! We're targeting the 1st of September for a stable release, and will use the next two months to polish v5, and ease the migration from v4. You can follow the v5 stable milestone for more details. We now encourage any new projects to start on v5.
    • ๐Ÿš€ We have completed all the planned breaking changes.
    • โš’๏ธ We added the codemod CLI to simplify migration to v5 (#26941) @eps1lon. You can find it at @material-ui/codemod.
    • ๐Ÿ› The majority of other changes in this release were bug fixes, test utilities and docs.

    @material-ui/[email protected]

    Breaking changes

    • [Tabs] Remove unnecessary wrapper from Tab (#26926) @siriwatknp

      span element that wraps children has been removed. wrapper classKey is also removed. More details about this change.

      <button class="MuiTab-root">
      - <span class="MuiTab-wrapper">
      - </span>
    • [BottomNavigation] Remove wrapper from BottomNavigationAction (#26923) @siriwatknp

      span element that wraps children has been removed. wrapper classKey is also removed. More details about this change.

      <button class="MuiBottomNavigationAction-root">
      - <span class="MuiBottomNavigationAction-wrapper">
          <span class="MuiBottomNavigationAction-label">
      - </span>


    • [Box] Fix TypeScript error on maxWidth prop (#26859) @ansh-saini
    • [Dialog] Automatically label by its DialogTitle (#26814) @eps1lon
    • [Hidden] Bring back and mark as deprecated (#26908) @siriwatknp
    • [List] Add button runtime deprecation warning (#26743) @siriwatknp
    • [Modal] Type BackdropProps according to styled version (#26836) @eps1lon
    • [Radio] Fix `defaultValue` to match the other value types (#26945) @oliviertassinari
    • [Stepper] Add completed to global pseudo-classes (#26953) @michal-perlakowski
    • [Stepper] Fix support for no connectors (#26874) @varandasi
    • [TextField] Prevent `hiddenLabel` from spreading to DOM (#26864) @siriwatknp
    • [TextField] Fix label disappearing when focusing a button (#26933) @michal-perlakowski

    @material-ui/[email protected]

    • [codemod] Add CLI (#26941) @eps1lon

    @material-ui/[email protected]

    • [icons] Regenerate transpiled files (#26985) @eps1lon

    @material-ui/[email protected]

    Breaking changes

    • [DatePicker] Remove helper text default value (#26866) @DouglasPds

      Make the default rendered text field closer to the most common use cases (denser).

        label="Helper text example"
        renderInput={(params) => (
      -    <TextField {...params} />
      +    <TextField {...params} helperText={params?.inputProps?.placeholder} />


    • [lab] Fix missing dependency on unstyled (#26937) @fishyFrogFace
    • [pickers] Consider TDate in ToolbarComponent types (#27035) @michal-perlakowski

    @material-ui/[email protected]

    • [system] Support array overridesResolver (#26824) @siriwatknp


    • [docs] Add notes to Table demo about stableSort (#27025) @CarlosGomez-dev
    • [docs] Add gold sponsor (#26968) @oliviertassinari
    • [docs] Update unstyled demos to not depend on `@material-ui/core` (#26869) @mnajdova
    • [docs] Fix demo paths in windows (#27004) @eps1lon
    • [docs] Export all locales (#27002) @eps1lon
    • [docs] Misc changes (#26925) @eps1lon
    • [docs] Fix /components/hidden merge conflict (#26997) @eps1lon
    • [docs] Fix 404 links (#26963) @oliviertassinari
    • [docs] Remove link that points to v4 blog post (#26960) @steveafrost
    • [docs] Use custom webpack loader for markdown (#26774) @eps1lon
    • [docs] Fix 301 links (#26942) @oliviertassinari
    • [docs] Add page for the `sx` prop (#26769) @mnajdova
    • [docs] pre-fill issue when a demo crashes (#27034) @eps1lon
    • [docs] Move styled page under system (#26818)


    • [core] Inline rollup-plugin-size-snapshot (#26986) @eps1lon
    • [core] Remove unused props clone (#26992) @oliviertassinari
    • [core] Fix tests on Windows (#26931) @michaldudak
    • [core] Fix merge conflict between #26954 and #26874 @oliviertassinari
    • [core] Upgrade issues-helper to v2 (#26955) @michal-perlakowski
    • [core] Fix merge conflict (#26928) @eps1lon
    • [test] Convert HiddenCSS tests to testing-library (#27019) @eps1lon
    • [test] Convert NativeSelectInput tests to testing-library (#26952) @eps1lon
    • [test] Add a default mount implementation to conformance tests (#26949) @eps1lon
    • [test] Update tests to pass [email protected] (#26967) @eps1lon
    • [test] Add types to describeConformanceV5 (#26954) @eps1lon
    • [test] Use createPickerMount where appropriate (#26951) @eps1lon
    • [test] Convert SwipeableDrawer tests to testing-library (#26916) @eps1lon
    • [test] Convert Menu tests to testing-library (#26915) @eps1lon
    • [test] Convert Popover tests to testing-library (#26913) @eps1lon
    • [test] Convert Modal tests to testing-library (#26912) @eps1lon
    • [test] Make remaining testing-library tests StrictMode compatible (#26924) @eps1lon
    • [test] Only allow wrapping enzyme mount not creating (#27018) @eps1lon
    • [typescript] Disallow spreading TransitionHandlerProps (#26927) @eps1lon

    All contributors of this release in alphabetical order: @ansh-saini, @BC-M, @CarlosGomez-dev, @DouglasPds, @eps1lon, @fishyFrogFace, @michal-perlakowski, @michaldudak, @mnajdova, @oliviertassinari, @siriwatknp, @steveafrost, @varandasi

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.38(Jun 24, 2021)

    Jun 23, 2021

    Big thanks to the 18 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿš€ We have only 2 left in the breaking changes. The plan to release 5.0.0-beta.0 is on July 1st and will start to promote its usage over v4.

    • ๐ŸŽจ We have updated Slider to match current Material Design guidelines.

    • ๐Ÿ’ก IconButton now supports 3 sizes (small, medium, large). See demo.

    • โ™ฟ๏ธ We have improved the default style of the Link to be more accessible (#26145) @ahmed-28

    @material-ui/[email protected]

    Breaking changes

    • [Menu] Use ButtonBase in MenuItem (#26591) @siriwatknp
      • Change the default value of anchorOrigin.vertical to follow the Material Design guidelines. The menu now displays below the anchor instead of on top of it. You can restore the previous behavior with:

        +  anchorOrigin={{
        +    vertical: 'top',
        +    horizontal: 'left',
        +  }}
      • The MenuItem component inherits the ButtonBase component instead of ListItem. The class names related to "MuiListItem-*" are removed and theming ListItem is no longer affecting MenuItem.

        -<li className="MuiButtonBase-root MuiMenuItem-root MuiListItem-root">
        +<li className="MuiButtonBase-root MuiMenuItem-root">
      • The prop listItemClasses was removed, you can use classes instead.

        -<MenuItem listItemClasses={{...}}>
        +<MenuItem classes={{...}}>
    • [theme] Improve default breakpoints (#26746) @siriwatknp

      The default breakpoints were changed to better match the common use cases. They also better match the Material Design guidelines. Read more about the change.

        xs: 0,
        sm: 600,
      - md: 960,
      + md: 900,
      - lg: 1280,
      + lg: 1200,
      - xl: 1920,
      + xl: 1536,

      If you prefer the old breakpoint values, use the snippet below.

      import { createTheme } from '@material-ui/core/styles';
      const theme = createTheme({
        breakpoints: {
          values: {
            xs: 0,
            sm: 600,
            md: 960,
            lg: 1280,
            xl: 1920,
    • [IconButton] Add size `large` and update styles (#26748) @siriwatknp

      The default size's padding is reduced to 8px which makes the default IconButton size of 40px. To get the old default size (48px), use size="large". The change was done to better match Google's products when Material Design stopped documenting the icon button pattern.

      - <IconButton>
      + <IconButton size="large">
    • [Slider] Adjust css to match the specification (#26632) @siriwatknp

      Rework the CSS to match the latest Material Design guidelines and make custom styles more intuitive. See documentation.

      You can reduce the density of the slider, closer to v4 with the size="small" prop.

    • [IconButton] Remove label span (#26801) @siriwatknp

      span element that wraps children has been removed. label classKey is also removed. More details about this change.

      <button class="MuiIconButton-root">
      - <span class="MuiIconButton-label">
          <svg />
      - </span>
    • [core] Remove `unstable_` prefix on the `useThemeProps` hook (#26777) @mnajdova

      The following utilities were renamed to not contain the unstable_ prefix:

      • @material-ui/sytstem
       import {
      -  unstable_useThemeProps,
      +  useThemeProps,
       } from '@material-ui/system';
      • @material-ui/core
       import {
      -  unstable_useThemeProps,
      +  useThemeProps,
       } from '@material-ui/core/styles';


    • [Alert] Add support for custom colors (#26831) @varandasi
    • [Button] Fix loading text invisible when disabled (#26857) @DanielBretzigheimer
    • [ButtonBase] Consider as a link with a custom component and `to` prop (#26576) @shadab14meb346
    • [ButtonBase] Derive state on render instead of in layout effects (#26762) @eps1lon
    • [Drawer] Fix incorrect z-index (#26791) @michal-perlakowski
    • [Drawer] Remove incorrect transition handler props (#26835) @eps1lon
    • [Link] Improve accessibility support (#26145) @ahmed-28
    • [Modal] Fix calculating scrollbar size when using custom scrollbar (#26816) @michal-perlakowski
    • [Rating] Make input ids less predictable (#26493) @eps1lon
    • [Stepper] Add componentsProps.label to StepLabel (#26807) @michal-perlakowski
    • [Tabs] Show error when Tab has display: none (#26783) @michal-perlakowski
    • [theme] Add base color palette type to components (#26697) @siriwatknp

    @material-ui/[email protected]

    Breaking Changes

    • [system] Normalize api for `createBox` (#26820) @mnajdova
       import { createBox } from '@material-ui/system';
      -const styled = createBox(defaultTheme);
      +const styled = createBox({ defaultTheme });


    • [system] Add ThemeProvider component (#26787) @mnajdova


    • [docs] Fix misspelling of the word Typography (#26898) @dmrqx
    • [docs] Instruct users to install @material-ui/icons with the next tag (#26873) @michal-perlakowski
    • [docs] Sync translations (#26828) @l10nbot
    • [docs] Improve grammar of autocomplete/autofill section (#26798) @dijonkitchen
    • [docs] Explain "inherited props" better in the props table (#26778) @eps1lon
    • [docs] Fix documentation for upgrading to v5 (#26812) @tungdt-90
    • [docs] Improve notification color (#26796) @mnajdova
    • [docs] Fix various a11y issues with /customization/color (#26757) @eps1lon
    • [docs] Move custom theme to frame (#26744) @siriwatknp
    • [docs] Fix small PT typo fix: inciar -> iniciar (#26775) @brunocavalcante
    • [I10n] Add Chinese (Hong Kong) (zh-HK) locale (#26637) @kshuiroy
    • [l10n] Add sinhalese (siLK) locale (#26875) @pavinduLakshan
    • [examples] Rename nextjs typescript theme from tsx to ts (#26862) @Izhaki


    • [test] Fix Drawer test API @oliviertassinari
    • [test] Adjust expected useAutocomplete error messages for React 18 (#26858) @eps1lon
    • [test] Convert Drawer tests to testing-library (#26837) @eps1lon
    • [test] Convert remaining enzyme tests to testing-library (#26832) @eps1lon
    • [test] Ignore ReactDOM.hydrate deprecation warnings (#26815) @eps1lon
    • [test] Reduce flakiness (#26761) @eps1lon
    • [useId] Reduce likelyhood of collisions (#26758) @eps1lon
    • yarn deduplicate @oliviertassinari
    • Fix running framer's prettier under pwsh (#26819) @michaldudak
    • [core] Update babel-plugin-optimize-clsx (#26861) @oliviertassinari
    • [core] Assume no document.all at runtime (#26821) @eps1lon
    • [core] Remove dependency on `@material-ui/private-theming` (#26793) @mnajdova
    • [core] Remove dependency on `@material-ui/styled-engine` (#26792) @mnajdova

    All contributors of this release in alphabetical order: @ahmed-28, @brunocavalcante, @DanielBretzigheimer, @dijonkitchen, @dmrqx, @eps1lon, @Izhaki, @kshuiroy, @l10nbot, @michal-perlakowski, @michaldudak, @mnajdova, @oliviertassinari, @pavinduLakshan, @shadab14meb346, @siriwatknp, @tungdt-90, @varandasi

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.37(Jun 15, 2021)

    Jun 15, 2021

    Big thanks to the 11 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ’„ Add support for responsive props on the Grid component (#26590) @likitarai1. This fixes a longstanding issue. You can now specify different values for each breakpoint.

      <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 1, sm: 2, md: 3 }}>
        <Grid item xs={2} sm={4} md={4} />
        <Grid item xs={2} sm={4} md={4} />
        <Grid item xs={2} sm={4} md={4} />

      Head to the documentation for more details.

    • โš’๏ธ We've introduced a new useTheme and useThemeProps hooks in the @material-ui/system package. We believe that this package can be used as a standalone styling solution for building custom design systems (#26649) @mnajdova.

    • ๐Ÿ’ฅ Made progress with the breaking changes. We have done 105 of the 109 changes planned. We are getting closer to our goal of releasing 5.0.0-beta.0 on July 1st and start to promote its usage over v4. You can also follow our milestone for more details.

    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @material-ui/[email protected]

    Breaking changes

    • [Button] Remove label span (#26666) @siriwatknp

      The span element that wraps children has been removed. label classKey is also removed. The nested span was required for fixing a flexbox issue with iOS < 11.0.

      <button class="MuiButton-root">
      - <span class="MuiButton-label">
      - </span>


    • [Button] Add missing color type (#26593) @sakura90
    • [Grid] Add responsive direction and spacing props (#26590) @likitarai1
    • [List] Add ListItemButton export to index (#26667) @chadmuro
    • [theme] Fix missing exported Breakpoints types (#26684) @robphoenix

    @material-ui/[email protected]

    Breaking changes

    • [system] Remove `theme` & `isRtl` from `useThemeProps` (#26701) @mnajdova

      The isRtl and theme props are no longer added by the useThemeProps hook. You can use the useTheme hook for this.

      -import { unstable_useThemeProps as useThemeProps } from '@material-ui/core/styles';
      +import { unstable_useThemeProps as useThemeProps, useTheme } from '@material-ui/core/styles';
       const Component = (inProps) => {
      -  const { isRtl, theme, ...props } = useThemeProps({ props: inProps, name: 'MuiComponent' });
      +  const props = useThemeProps({ props: inProps, name: 'MuiComponent' });
      +  const theme = useTheme();
      +  const isRtl = theme.direction === 'rtl';
         //.. rest of the code


    • [system] Add useThemeProps & useTheme hooks (#26649) @mnajdova
    • [system] Add color manipulators (#26668) @mnajdova
    • [system] Fix support of custom shape in createTheme (#26673) @varandasi

    @material-ui/[email protected]

    • [Slider] Improve TS definition (#26642) @mnajdova
    • [TrapFocus] Capture nodeToRestore via relatedTarget (#26696) @eps1lon

    @material-ui/[email protected]

    • Revert "[icons] Only ship ES modules (#26310)" (#26656) @eps1lon

      The changes that we have tried in #26310 were breaking the integration with Next.js.

    @material-ui/[email protected]

    • [core] Remove unused useKeyDown (#26765) @eps1lon
    • [DateTimePicker] Fix not visible selected tab icon (#26624) @nikitabobers


    • [blog] Michaล‚ Dudak joins Material-UI (#26700) @oliviertassinari
    • [docs] Migrate onepirate premium template to emotion part2 (#26707) @vicasas
    • [docs] Fix TextField demo layout (#26710) @vicasas
    • [docs] Improve Paperbase demo (#26711) @oliviertassinari
    • [docs] Migrate onepirate premium template to emotion part1 (#26671) @vicasas
    • [docs] Migrate paperbase premium template to emotion (#26658) @vicasas
    • [List] Fix demo to have correct semantic (#26742) @siriwatknp


    • [core] Monitore size of key system modules (#26712) @oliviertassinari
    • [core] Batch small changes (#26738) @oliviertassinari
    • [core] Batch small changes (#26628) @oliviertassinari
    • [test] Ignore ReactDOM.render deprecation warning (#26683) @eps1lon
    • [test] Run e2e test with React 18 on a schedule (#26690) @eps1lon
    • [test] Count profiler renders not passive effects (#26678) @eps1lon
    • [test] Bundling fixtures should not override source build with published build (#26657) @eps1lon
    • [test] Make tests oblivious to StrictMode (#26654) @eps1lon

    All contributors of this release in alphabetical order: @chadmuro, @eps1lon, @likitarai1, @mnajdova, @nikitabobers, @oliviertassinari, @robphoenix, @sakura90, @siriwatknp, @varandasi, @vicasas

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.36(Jun 8, 2021)

    Jun 8, 2021

    Big thanks to the 14 contributors who made this release possible. Here are some highlights โœจ:

    • โš’๏ธ We've introduced a new ListItemButton component that should prevent common mistakes when using <ListItem button /> and help with customization and TypeScript support (#26446) @siriwatknp.

    • ๐Ÿ‘ฉโ€๐ŸŽค experimentalStyled is now available without the experimental prefix. We're confident that its API shouldn't receive any major changes until the stable release of v5 (#26558) @mnajdova.

    • ๐Ÿ“ฆ @material-ui/icons only ships ES modules and no longer CommonJS modules. This reduces the download size of the package from 1.7 MB to 1.2 MB and install size from 15.6 MB to 6.7 MB (#26310) @eps1lon.

    • ๐Ÿ’„ Add support for row and column spacing in the Grid component (#26559) @likitarai1. grid spacing demo

      Note that this feature was already available for CSS grid users with the rowGap and columnGap props.

    @material-ui/[email protected]

    Breaking changes

    • [AppBar] Fix background color on dark mode (#26545) @siriwatknp

      The color prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the Material Design guidelines. Use enableColorOnDark to restore the behavior of v4.

      <AppBar enableColorOnDark />
    • [core] Rename `experimentalStyled` to `styled` (#26558) @mnajdova

      Remove the experimental prefix, this module is going stable:

      -import { experimentalStyled as styled } from '@material-ui/core/styles';
      +import { styled } from '@material-ui/core/styles';
    • [SwitchBase] Replace IconButton with ButtonBase (#26460) @siriwatknp
    • [theme] Improve default `primary`, `secondary` and `error` theme palette (#26555) @siriwatknp


    • [Box] Fix module 'clsx' not found in system (#26553) @coder-freestyle
    • [Box] Fix runtime error when using styled-components without ThemeProvider (#26548) @mnajdova
    • [Radio][Checkbox] Don't forward `color` to DOM elements (#26625) @siriwatknp
    • [Dialog] Flatten DialogTitle DOM structure, remove `disableTypography` (#26323) @eps1lon
    • [Grid] Add rowSpacing and columnSpacing props (#26559) @likitarai1
    • [List] extract button from ListItem to ListItemButton (#26446) @siriwatknp
    • [Popover] Fix PaperProps.ref breaking positioning (#26560) @vedadeepta
    • [Rating] onChangeActive shouldn't be fired on blur/focus (#26584) @coder-freestyle
    • [Select] Fix custom font size centering arrow (#26570) @sarahannnicholson
    • [styled] Convert implicit styleProps to explicit (#26461) @[email protected]
    • [Tabs] Fix RTL indicator (#26470) @siriwatknp
    • [Tabs] Fix arrow rotation in vertical & RTL (#26527) @siriwatknp
    • [TextField] Fix support for custom `size` prop value (#26585) @coder-freestyle
    • [Tooltip] Finish exiting once started (#26535) @eps1lon

    @material-ui/[email protected]

    Breaking changes

    • [icons] Only ship ES modules (#26310) @eps1lon

      The require() of @material-ui/icons is no longer supported. This should not affect you if you're using a bundler like webpack or snowpack or meta frameworks like next or gatsby.

    @material-ui/[email protected]

    Breaking changes

    • [pickers] Remove `openPickerIcon` prop in favor of `components.OpenPickerIcon` (#26223) @vedadeepta
          LeftArrowIcon: AlarmIcon,
          RightArrowIcon: SnoozeIcon,
      +   OpenPickerIcon: ClockIcon,
      - openPickerIcon={<ClockIcon />}

    @material-ui/[email protected]

    • [system] Add createTheme util (#26490) @mnajdova


    • [docs] Migrate templates to emotion (#26604) @vicasas
    • [docs] Remove custom primary & secondary color (#26541) @siriwatknp
    • [docs] Don't escape prop descriptions for markdown table context (#26579) @eps1lon
    • [docs] Prepare for data grid auto-generated docs (#26477) @m4theushw
    • [docs] Fix typo sx !== xs (#26596) @onpaws
    • [docs] Multiple select demos moving when selecting values (#26539) @itsnorbertkalacska
    • [docs] Improve migration guide for `@material-ui/styles` (#26552) @mnajdova
    • [docs] `Rating` `value` is nullable in `onChange` (#26542) @sakura90
    • [example] Remove the dependency on @material-ui/styles (#26567) @garfunkelvila


    • [core] Ignore latest prettier run in git-blame @eps1lon
    • [core] Format @eps1lon
    • [test] Add bundle fixtures (#23166) @eps1lon
    • [website] Add Michaล‚ to the About Us page (#26557) @michaldudak

    All contributors of this release in alphabetical order: @coder-freestyle, @eps1lon, @garfunkelvila, @itsnorbertkalacska, @likitarai1, @m4theushw, @michaldudak, @mnajdova, @onpaws, @sakura90, @sarahannnicholson, @siriwatknp, @vedadeepta, @vicasas

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.35(May 31, 2021)

    May 31, 2021

    Big thanks to the 14 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ‘ฉโ€๐ŸŽค We have completed the migration to emotion/sc of all the components (@material-ui/core and @material-ui/lab) @siriwatknp, @mnajdova.
    • ๐Ÿ“ฆ Save 12 kB gzipped by removing the dependency on @material-ui/styles (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova.
    • ๐Ÿ“ฆ Reduce a bit the size of the icons package. We go from 16.8MB to 15.1MB (#26309) @eps1lon
    • ๐Ÿ‘ฉโ€๐ŸŽค We are progressively moving all modules that are relevant to styling custom design systems in @material-ui/system. It's meant to be complementary with @material-ui/unstyled (#26379, #26485) @mnajdova.
    • โš’๏ธ Add many new codemods to automate the migration from v4 to v5 (#24867) @mbrookes.
    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @material-ui/[email protected]

    Breaking changes

    • [styles] Remove makeStyles from @material-ui/core (#26382) @mnajdova

      The makeStyles JSS utility is no longer exported from @material-ui/core. You can use @material-ui/styles instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, it's recommended you use the ThemeProvider component from @material-ui/core instead.

      -import { makeStyles } from '@material-ui/core/styles';
      +import { makeStyles } from '@material-ui/styles';
      import { createTheme, ThemeProvider } from '@material-ui/core/styles';
      const theme = createTheme();
       const useStyles = makeStyles((theme) => ({
         background: theme.palette.primary.main,
       function Component() {
         const classes = useStyles();
         return <div className={classes.root} />
       // In the root of your app
       function App(props) {
      -  return <Component />;
      +  return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
    • [styles] Remove withStyles from @material-ui/core (#26377) @mnajdova

      The withStyles JSS utility is no longer exported from @material-ui/core. You can use @material-ui/styles instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, you should use the ThemeProvider component from @material-ui/core instead.

      -import { withStyles } from '@material-ui/core/styles';
      +import { withStyles } from '@material-ui/styles';
      import { createTheme, ThemeProvider } from '@material-ui/core/styles';
      const defaultTheme = createTheme();
       const MyComponent = withStyles((props) => {
         const { classes, className, ...other } = props;
         return <div className={clsx(className, classes.root)} {...other} />
       })(({ theme }) => ({ root: { background: theme.palette.primary.main }}));
       function App() {
      -  return <MyComponent />;
      +  return <ThemeProvider theme={defaultTheme}><MyComponent /></ThemeProvider>;
    • [styles] Merge options in experimentalStyled (#26396) @mnajdova

      The options inside the experimentalStyled module are now merged under one object. In the coming weeks, we will rename ths module: styled() to signal that it's no longer experimental.

      -experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something' }, { skipSx: true })(...);
      +experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something', skipSx: true })(...);
    • [Tabs] Update min & max width and remove minWidth media query (#26458) @siriwatknp

      Update the implementation to better match Material Design:


    • [ButtonBase] Fix role="button" attribute (#26271) @Gautam-Arora24
    • [Dialog] Fix support for custom breakpoints (#26331) @jeferson-sb
    • [Select] Open popup below button (#26200) @oliviertassinari
    • [TextField] Add variants support, e.g. custom sizes (#26468) @siriwatknp
    • [Tooltip] Improve handling of small vs. touch screens (#26097) @oliviertassinari

    @material-ui/[email protected]

    • [codemod] Add multiple codemods to migrate components from v4 to v5 (#24867) @mbrookes
    • [codemod] Correct path and add target placeholder (#26414) @mbrookes

    @material-ui/[email protected]

    • [icons] Use array children instead of React fragments (#26309) @eps1lon

    @material-ui/[email protected]

    • [system] Add Box to system (#26379) @mnajdova
    • [system] Add createStyled utility (#26485) @mnajdova

    @material-ui/[email protected]

    • [styled-engine] Fix styled() util to respect options (#26339) @pasDamola

    @material-ui/[email protected]

    Breaking changes

    • [pickers] Remove allowKeyboardControl (#26451) @eps1lon

    • [ClockPicker] Rework keyboard implementation (#26400) @eps1lon

      Remove the allowKeyboardControl prop from ClockPicker (and TimePicker and variants). Keyboard navigation now works by default.


    • [Button] Migrate LoadingButton to emotion (#26370) @siriwatknp
    • [ClockPicker] Selected option is the active descendant (#26411) @eps1lon
    • [DatePicker] Migrate CalendarPicker to emotion (#26390) @siriwatknp
    • [DatePicker] Migrate CalendarPickerSkeleton to emotion (#26335) @siriwatknp
    • [DateRangePicker] Migrate DateRangePickerDay to emotion (#26368) @siriwatknp
    • [DateRangePicker] Migrate internal components to emotion (#26326) @siriwatknp
    • [pickers] Migrate PickersCalendarHeader to emotion (#26354) @siriwatknp
    • [pickers] Migrate PickersModalDialog to emotion (#26355) @siriwatknp
    • [pickers] Migrate PickersPopper to emotion (#26391) @siriwatknp
    • [pickers] Migrate PickersTransition to emotion (#26353) @siriwatknp
    • [TimePicker] Migrate ClockPicker to emotion (#26389) @siriwatknp
    • [TreeView] Correctly select items in deeply nested trees (#26413) @Dru89


    • [docs] Add page for experimentalStyled() (#26361) @mnajdova
    • [docs] Add TypeScript convention (#26259) @siriwatknp
    • [docs] Add warning about git-blame-ignore-revs (#26487) @eps1lon
    • [docs] Clarify migration from Hidden (#26348) @m4theushw
    • [docs] Fix grammar for style library page (#26325) @mbrookes
    • [docs] Persist copied state indefinitely or until the user moves their cursor (#26336) @eps1lon
    • [docs] Typo in MultipleSelect (#26466) @wolfykey
    • [docs] Update system installation for v5 (#26481) @mnajdova
    • [template] Demo how to retreive form value (#26393) @akshitsuri


    • [core] Batch small changes (#26434) @oliviertassinari
    • [core] Fix peer dependencies declaration with yarn v2 (#26433) @oliviertassinari
    • [core] Remove @material-ui/styles dependencies from declaration files too (#26376) @mnajdova
    • [core] Revert Leverage CircleCI workspaces for jobs after checkout (#26444) @eps1lon
    • [test] Don't hoist constant elements (#26448) @eps1lon
    • [test] Fix prop-type warning (#26432) @oliviertassinari
    • [test] Flush scheduled effects before user event returns (#26447) @eps1lon
    • [test] Move ClockPicker tests to ClockPicker.test (#26407) @eps1lon
    • [test] setProps from createPickerRender should set props on the rendered element (#26405) @eps1lon
    • [utils] Convert useId to TypeScript (#26491) @eps1lon
    • [website] Add Material-UI X page (#25794) @DanailH
    • [website] Add open application section (#26501) @oliviertassinari
    • [website] Add Siriwat to team page (#26406) @siriwatknp

    All contributors of this release in alphabetical order: @akshitsuri, @DanailH, @Dru89, @eps1lon, @Gautam-Arora24, @jeferson-sb, @m4theushw, @mbrookes, @mnajdova, @oliviertassinari, @pasDamola, @siriwatknp, @wolfykey

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.34(May 18, 2021)

    May 18, 2021

    Big thanks to the 16 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ’ฅ Make progress with the breaking changes. We have done 89 of the 109 changes planned. We will release 5.0.0-beta.0 on July 1st and start to promote its usage over v4. You can also follow our milestone for more details.
    • ๐Ÿš€ Make progress with components migration to emotion. We have done 153 of the 168 components (almost there!)
    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @material-ui/[email protected]

    Breaking change

    • [Select][NativeSelect] Polish CSS classes (#26186) @m4theushw

      Select, NativeSelect

      Merge the selectMenu slot into select. Slot selectMenu was redundant. The root slot is no longer applied to the select, but to the root.

      -<NativeSelect classes={{ root: 'class1', select: 'class2', selectMenu: 'class3' }} />
      +<NativeSelect classes={{ select: 'class1 class2 class3' }} />


      Move the custom class on input to select. The input key is being applied on another element.

      - classes={{ input: 'foo' }}
      + classes={{ select: 'foo' }}
    • [core] Move `StyledEngineProvider` to `@material-ui/core/styles` (#26265) @mnajdova

      Change location of StyledEngineProvider import.

      -import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
      +import { StyledEngineProvider } from '@material-ui/core/styles';
    • [Autocomplete] Apply .Mui-focused instead of data-focus on the focused option (#26181) @m4theushw

      The data-focus attribute is not set on the focused option anymore, instead, global class names are used.

      -'.MuiAutocomplete-option[data-focus="true"]': {
      +'.MuiAutocomplete-option.Mui-focused': {
    • [Radio] Make color primary default (#26180) @vicasas
    • [Switch] Make color primary default (#26182) @vicasas
    • [pickers] Drop ResponsiveWrapper usage (#26123) @eps1lon

      When a responsive picker changes from mobile to desktop, it will now clear its entire state. To keep the original behavior you can implement a controlled picker:

      function ResponsiveDateTimePicker(props) {
        const [open, setOpen] = React.useState(false);
        return (
            onClose={() => setOpen(false)}
            onOpen={() => setOpen(true)}
    • [Autocomplete] Rename getOptionSelected to isOptionEqualToValue (#26173) @m4theushw
      -  getOptionSelected={(option, value) => option.title === value.title}
      +  isOptionEqualToValue={(option, value) => option.title === value.title}

    Follow this link for full migration from v4 => v5


    • [TextField] Fix hiddenLabel type of FilledInput (#26290) @siriwatknp
    • [TextField] Fix classes forward to InputBase (#26231) @arpitBhalla
    • [Autocomplete] Fix missing 'createOption' in AutocompleteCloseReason type (#26197) @Gautam-Arora24
    • [Autocomplete] Reduce CSS specificity by 1 (#26238) @Gautam-Arora24
    • [ButtonBase] Omit aria-disabled if not disabled (#26189) @Gautam-Arora24
    • [colors] Fix A inconsistencies (#26196) @oliviertassinari
    • [examples] Fix dynamic global styles & global styles leak in the ssr examples (#26177) @mnajdova
    • [Slider] Fix support for non primary colors (#26285) @davidfdriscoll
    • [Slider] Center value label for disabled slider (#26257) @davidfdriscoll
    • [styled-engine] Fix styled-components not supporting empty style (#26098) @ruppysuppy
    • [styles] Fix overrides type issues (#26228) @mnajdova
    • [Container] Fix support for custom breakpoints (#26328) @alanszp

    @material-ui/[email protected]

    • [pickers] Migrate TimePickerToolbar to emotion (#26274) @siriwatknp
    • [pickers] Migrate DatePickerToolbar to emotion (#26292) @siriwatknp
    • [DateTimePicker] Migrate DateTimePickerTabs and Toolbar to emotion (#26327) @siriwatknp
    • [DatePicker] Migrate PickersYear to emotion (#25949) @siriwatknp
    • [DateRangePicker] Migrate PickersToolbarText to emotion (#25983) @siriwatknp
    • [pickers] Migrate StaticWrapper to emotion (#26275) @siriwatknp
    • [pickers] Migrate Clock to emotion (#26278) @siriwatknp
    • [pickers] Migrate PickersToolbar to emotion (#26273) @siriwatknp
    • [pickers] Migrate ClockNumber to emotion (#26058) @siriwatknp
    • [pickers] Migrate ClockPointer to emotion (#26057) @siriwatknp
    • [pickers] Migrate PickersMonth to emotion (#26021) @siriwatknp
    • [pickers] Migrate MonthPicker to emotion (#26025) @siriwatknp
    • [pickers] Migrate PickersDay to emotion (#25995) @siriwatknp
    • [pickers] Migrate PickersToolbarButton to emotion (#25989) @siriwatknp

    @material-ui/[email protected]

    • [icons] Remove extraneous React.Fragment (#26308) @eps1lon
    • [icons] Synchronize icons (#26302) @eps1lon

      New DriveFileMove icon and its variants


    • [NProgressBar] Fix invalid ARIA and HTML (#26234) @eps1lon
    • [docs] Simplify demos slider (#26324) @oliviertassinari
    • [docs] Use transpiled icons directly (#26268) @eps1lon
    • [docs] Remove dependency on withStyles from @material-ui/core/styles (#26269) @mnajdova
    • [docs] Add Jalali date picker demo (#26243) @smmoosavi
    • [docs] Remove last dependencies on `makeStyles` from `@material-ui/core/styles` (#26246) @mnajdova
    • [docs] Polish the pickers demo (#26094) @oliviertassinari
    • [docs] Fix broken overrides link on API pages (#26244) @mnajdova
    • [docs] Improve documentation for Buttons (#26184) @arpitBhalla
    • [docs] Emphasize on props for screen readers (#26222) @atisheyJain03
    • [docs] Link third-party routing in Bottom Navigation (#26190) @arpitBhalla
    • [docs] Migrate Select, Progress demos to emotion (#26178) @mnajdova
    • [docs] Add accessibility section to Badges (#26009) @likitarai1
    • [docs] Migrate Popper, Drawer demos to emotion (#26183) @mnajdova
    • [docs] Use public next/router events API (#26233) @eps1lon
    • [docs] Remove remnants Hidden component (#26191) @vicasas
    • [docs] Ensure TreeView demos don't overflow demo container (#26161) @eps1lon
    • [docs] Fix a typo in the import statement of LocalizationProvider (#26226) @huyenltnguyen
    • [docs] Improve react-admin coverage in the showcase (#26169) @fzaninotto
    • [docs] Fix Workbox that are causing infinite loading of site (#26193) @arpitBhalla


    • [core] Skip sx prop in internal components (#26235) @mnajdova
    • [core] Remove `withStyles` dependencies from `@material-ui/core/styles` (#26277) @mnajdova
    • [core] Include human readable target in the browserstack build (#26322) @eps1lon
    • [core] Fix NotchedOutlineProps type (#26305) @gnowland
    • [core] Add file for git-blame --ignore-revs-file (#26295) @eps1lon
    • [core] Ensure component class keys aren't missing (#25754) @eps1lon
    • [core] Drop support for blocking mode (#26262) @eps1lon
    • [core] Don't download monorepo packages (#26261) @eps1lon
    • [core] Batch small changes (#26199) @oliviertassinari
    • [core] Extract classes descriptions from TypeScript (#25933) @eps1lon
    • [styled-engine] Fix test script (#26258) @ruppysuppy

    All contributors of this release in alphabetical order: @arpitBhalla, @atisheyJain03, @davidfdriscoll, @eps1lon, @fzaninotto, @Gautam-Arora24, @gnowland, @huyenltnguyen, @likitarai1, @m4theushw, @mnajdova, @oliviertassinari, @ruppysuppy, @siriwatknp, @smmoosavi, @vicas

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.33(May 9, 2021)

    May 9, 2021

    Big thanks to the 17 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ’ฅ Make progress with the breaking changes. We have done 81 of the 109 changes planned. We will release 5.0.0-beta.0 on July 1st and start to promote its usage over v4. You can also follow our milestone for more details.
    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @material-ui/[email protected]

    Breaking changes

    • [core] Remove deprecated innerRef prop (#26028) @m4theushw


      Replace the innerRef prop with the ref prop. Refs are now automatically forwarded to the inner component.

      import * as React from 'react';
      import { withStyles } from '@material-ui/core/styles';
      const MyComponent = withStyles({
        root: {
          backgroundColor: 'red',
      })(({ classes }) => <div className={classes.root} />);
      function MyOtherComponent(props) {
        const ref = React.useRef();
      - return <MyComponent innerRef={ref} />;
      + return <MyComponent ref={ref} />;


      Replace the innerRef prop with the ref prop. Refs are now automatically forwarded to the inner component.

      import * as React from 'react';
      import { withTheme  } from '@material-ui/core/styles';
      const MyComponent = withTheme(({ theme }) => <div>{props.theme.direction}</div>);
      function MyOtherComponent(props) {
        const ref = React.useRef();
      - return <MyComponent innerRef={ref} />;
      + return <MyComponent ref={ref} />;
    • [theme] Rename `createMuiTheme` to `createTheme` (#25992) @m4theushw

      Developers only need one theme in their application. A prefix would suggest a second theme is needed. It's not the case. createMuiTheme will be removed in v6.

      -import { createMuiTheme } from '@material-ui/core/styles';
      +import { createTheme } from '@material-ui/core/styles';
      -const theme = createMuiTheme({
      +const theme = createTheme({
    • [theme] Remove MuiThemeProvider alias (#26171) @m4theushw

      The MuiThemeProvider is no longer exported. Use ThemeProvider instead. It was removed from the documentation during v4-beta, 2 years ago.

      -import { MuiThemeProvider } from '@material-ui/core/styles';
      +import { ThemeProvider } from '@material-ui/core/styles';
    • [Box] Remove the `clone` prop (#26031) @m4theushw

      Its behavior can be obtained using the sx prop.

      -<Box sx={{ border: '1px dashed grey' }} clone>
      -  <Button>Save</Button>
      +<Button sx={{ border: '1px dashed grey' }}>Save</Button>
    • [Box] Remove render prop (#26113) @m4theushw

      Its behavior can be obtained using the sx prop directly on the child if it's a Material-UI component. For non-Material-UI components use the sx prop in conjunction with the component prop:

      -<Box sx={{ border: '1px dashed grey' }}>
      -  {(props) => <Button {...props}>Save</Button>}
      +<Button sx={{ border: '1px dashed grey' }}>Save</Button>
      -<Box sx={{ border: '1px dashed grey' }}>
      -  {(props) => <button {...props}>Save</button>}
      +<Box component="button" sx={{ border: '1px dashed grey' }}>Save</Box>
    • [Checkbox] Make color="primary" default (#26002) @vicasas

      This better matches the material design guidelines.

      -<Checkbox />
      +<Checkbox color="secondary />
    • [Select] Remove `labelWidth` prop (#26026) @m4theushw

      The label prop now fulfills the same purpose, using CSS layout instead of JavaScript measurement to render the gap in the outlined. The TextField already handles it by default.

      -<Select variant="outlined" labelWidth={20} />
      +<Select label="Gender" />
    • [core] Remove `styled` JSS utility from `@material-ui/core/styles` (#26101) @mnajdova

      The styled JSS utility is no longer exported from @material-ui/core/styles. You can use @material-ui/styles/styled instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, it's recommended you use the ThemeProvider component from @material-ui/core/styles instead.

      -import { styled } from '@material-ui/core/styles';
      +import { styled } from '@material-ui/styles';
      +import { createTheme, ThemeProvider } from '@material-ui/core/styles';
      +const theme = createTheme();
       const MyComponent = styled('div')(({ theme }) => ({ background: theme.palette.primary.main }));
       function App(props) {
      -  return <MyComponent />;
      +  return <ThemeProvider theme={theme}><MyComponent {...props} /></ThemeProvider>;

      For new components, you can instead use the experimentalStyled() helper powered by emotion/sc.

      import { experimentalStyled as styled } from '@material-ui/core/styles';
    • [Hidden] Remove component (#26135) @m4theushw

      Removed in favor of using the sx prop or the useMediaQuery hook.

      Use the sx prop to replace implementation="css":

      -<Hidden implementation="css" xlUp><Paper /></Hidden>
      -<Hidden implementation="css" xlUp><button /></Hidden>
      +<Paper sx={{ display: { xl: 'none', xs: 'block' } }} />
      +<Box component="button" sx={{ display: { xl: 'none', xs: 'block' } }} />

      Use the useMediaQuery hook to replace implementation="js":

      -<Hidden implementation="js" xlUp><Paper /></Hidden>
      +const hidden = useMediaQuery(theme => theme.breakpoints.up('xl'));
      +return hidden ? null : <Paper />;
    • [withWidth] Remove API (#26136) @m4theushw

      Removed in favor of the useMediaQuery hook. You can reproduce the same functionality creating a custom hook as described here.

    • [Autocomplete] Rename values of the reason argument (#26172) @m4theushw

      Rename the values of the reason argument in onChange and onClose for consistency:

      1. create-option to createOption
      2. select-option to selectOption
      3. remove-option to removeOption
    • [core] Remove `withTheme` from `@material-ui/core` (#26051) @mnajdova

      The withTheme utility has been removed from the @material-ui/core/styles package. You can use the @material-ui/styles/withTheme instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, it's recommended you use the ThemeProvider from @material-ui/core/styles instead.

       import * as React from 'react';
      -import { withTheme } from '@material-ui/core/styles';
      +import { withTheme } from '@material-ui/styles';
      +import { createTheme, ThemeProvider } from '@material-ui/core/styles';
      +const theme = createTheme();
       const MyComponent = withTheme(({ theme }) => <div>{props.theme.direction}</div>);
       function App(props) {
      -  return <MyComponent />;
      +  return <ThemeProvider theme={theme}><MyComponent {...props} /></ThemeProvider>;
    • [core] Remove `createStyles` from `@material-ui/core` (#26018) @mnajdova
      • The createGenerateClassName module is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
      -import { createGenerateClassName } from '@material-ui/core/styles';
      +import { createGenerateClassName } from '@material-ui/styles';
      • The jssPreset objeect is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
      -import { jssPreset } from '@material-ui/core/styles';
      +import { jssPreset } from '@material-ui/styles';
      • The ServerStyleSheets component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
      -import { ServerStyleSheets } from '@material-ui/core/styles';
      +import { ServerStyleSheets } from '@material-ui/styles';
    • The StylesProvider component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.

      -import { StylesProvider } from '@material-ui/core/styles';
      +import { StylesProvider } from '@material-ui/styles';
    • The useThemeVariants hook is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.

      -import { useThemeVariants } from '@material-ui/core/styles';
      +import { useThemeVariants } from '@material-ui/styles';


    • [Dialog] Improve support for custom breakpoints (#26092) @oliviertassinari
    • [IconButton] Fix default color prop (#26064) @Jack-Works
    • [Radio] Migrate RadioButtonIcon to emotion (#26068) @mnajdova
    • [SwipeableDrawer] Migrate SwipeArea to emotion (#26059) @mnajdova
    • [Table] Synchronize horizontal sticky header position with body (#26159) @LiKang6688
    • [Tabs] Fix support for null children in TabList (#26170) @hubertokf
    • [Tabs] Fix keyboard traversal over disabled tabs (#26061) @anish-khanna
    • [TextField] Fix missing `standard` variant classes in types (#26115) @siriwatknp
    • [TextField] Allow to customize Typography in FormControlLabel (#25883) @mousemke
    • [theme] Fix transition duration default value customization (#26054) @anshuman9999

    @material-ui/[email protected]

    Breaking changes

    • [Timeline] Add support for position override on items (#25974) @simonecervini

      Rename the align prop to position to reduce confusion.

      -<Timeline align="alternate">
      +<Timeline position="alternate">
      -<Timeline align="left">
      +<Timeline position="right">
      -<Timeline align="right">
      +<Timeline position="left">
    • [pickers] Remove customization of deep components (#26118) @eps1lon


    • [DatePicker] Migrate YearPicker to emotion (#25928) @siriwatknp
    • [DateRangePicker] Fix not being opened on click (#26016) @eps1lon
    • [pickers] Fix ref types (#26121) @eps1lon
    • [pickers] Rely on native behavior for disabled/readOnly behavior (#26055) @eps1lon
    • [pickers] Remove unused components from mobile and desktop variants (#26066) @eps1lon
    • [pickers] Document readonly/disabled pickers (#26056) @eps1lon
    • [pickers] Remove unused components from static variants (#26052) @eps1lon
    • [pickers] Toggle mobile keyboard view in the same commit as the view changes (#26017) @eps1lon
    • [pickers] Remove redundant aria-hidden (#26014) @eps1lon
    • [pickers] Ensure input value is reset in the same commit as the value (#25972) @eps1lon
    • [internal][pickers] Pass desktop wrapper props explicitly (#26120) @eps1lon
    • [internal][pickers] Move useInterceptProps into module (#26090) @eps1lon
    • [internal][pickers] Explicit default toolbar components (#26075) @eps1lon
    • [internal][pickers] Move validation from config to module (#26074) @eps1lon
    • [internal][pickers] Minimal types for defaultizing in useInterceptProps (#26063) @eps1lon
    • [internal][pickers] Don't validate inputFormat in production (#26053) @eps1lon
    • [internal][pickers] Remove unused styles (#26023) @eps1lon
    • [internal][pickers] Remove `AllSharedPickerProps` and `AllSharedDateRangePickerProps` (#26005) @eps1lon


    • [docs] Migrate Tabs, Table, Snackbar demos to emotion (#26175) @mnajdova
    • [docs] Fix dynamic global styles (#25690) @mnajdova
    • [docs] Fixed React.forwardRef missing display name ESLint error (#26160) @arpitBhalla
    • [docs] Migrate Tooltip, Steppers demos to emotion (#26165) @mnajdova
    • [docs] Migrate Dialog demos to emotion (#26162) @vicasas
    • [docs] Remove `makeStyles` from landing pages (#26130) @mnajdova
    • [docs] Add new customized switch examples (#26096) @DanielBretzigheimer
    • [docs] Migrate Autocomplete demos (#26127) @mnajdova
    • [docs] Remove `@material-ui/core/styles` from the styles pages (#26126) @mnajdova
    • [docs] Update templates, premium-themes to use `makeStyles` from `@material-ui/styles` (#26131) @mnajdova
    • [docs] Migrate TreeView demos (#26146) @mnajdova
    • [docs] More explicit breakpoint documentation in `sx` (#26140) @eps1lon
    • [docs] Explicitly describe how the media query affects the rendered version (#26129) @eps1lon
    • [docs] Fix 301 link to store (#26095) @oliviertassinari
    • [docs] Normalize name use for state in pickers demo (#26093) @oliviertassinari
    • [docs] Consistent type name in docs (#26077) @jamesaucode
    • [docs] Remove `makeStyles` dependency from core in modules (#26071) @mnajdova
    • [docs] Add links for demo in different deploys (#26065) @eps1lon
    • [docs] Add section for useFormControl (#25927) @t49tran
    • [docs] Add Styled Engine page (#25911) @mnajdova
    • [docs] Migrate Timeline demos to emotion (#26036) @vicasas
    • [docs] Document all the colors available (#26015) @anshuman9999
    • [docs] Avoid extracting classes twice (#25973) @oliviertassinari


    • [test] Add test for behavior when picker variant changes (#26128) @eps1lon
    • [test] testing-library patterns for playwright tests (#25860) @eps1lon
    • [test] Remove scheduler/tracing (#26062) @eps1lon
    • [test] Remove duplicate property (#26011) @eps1lon
    • [core] Link to experimental size-comparison page (#26179) @eps1lon
    • [core] Update typings for theme's components (#26125) @mnajdova
    • [core] Improve `[email protected]` compat (#26116) @eps1lon
    • [core] Remove more dependencies on `@material-ui/styles` (#26100) @mnajdova
    • [core] Batch small changes (#26083) @oliviertassinari
    • [core] ComponentType -> JSXElementConstructor (#26081) @eps1lon
    • [core] Create new @material-ui/private-theming package (#25986) @mnajdova

    All contributors of this release in alphabetical order: @anish-khanna, @anshuman9999, @arpitBhalla, @DanielBretzigheimer, @eps1lon, @hubertokf, @Jack-Works, @jamesaucode, @LiKang6688, @m4theushw, @mnajdova, @mousemke, @oliviertassinari, @simonecervini, @siriwatknp, @t49tran, @vicasas

    Source code(tar.gz)
    Source code(zip)
  • v4.11.4(Apr 27, 2021)

    Apr 27, 2021

    Big thanks to the 6 contributors who made this release possible. Here are some highlights โœจ:

    We fixed an issue related to some packages using incompatible versions of @material-ui/types. This affected @material-ui/core, @material-ui/lab, and @material-ui/styles @material-ui/[email protected] accidentally included a breaking change.

    @material-ui/[email protected]

    • [Avatar] Remove circular variant deprecation (#25543) @michal-perlakowski
    • [types] Ensure Omit type exists (#25978) @eps1lon


    • [DataGrid] Update docs sections (#25980) @dtassone
    • [docs] Sync master redirections with next @oliviertassinari
    • [docs] Fix deploy @oliviertassinari
    • [docs] Move DataGrid editing nav link (#25769) @dtassone
    • [docs] Design is what matters @oliviertassinari
    • [docs] Add the new demo page (#25285) @DanailH
    • [docs] Add a temporary hiring block in the docs (#25111) @oliviertassinari
    • [docs] Remove under construction icons from DataGrid feature pages (#24946) @DanailH
    • [docs] Add HoodieBees to sponsors (#24735) @mbrookes
    • [docs] Add sorting section (#24637) @dtassone
    • [docs] v4 is not under active development @oliviertassinari


    • remove job ad @oliviertassinari
    • clearer header @oliviertassinari
    • [blog] Fix typos @oliviertassinari
    • [core] Update the codesandbox issue templates (#25501) @oliviertassinari
    • [core] Support /r/issue-template back (#24870) @oliviertassinari
    • [website] Q1 2021 Update (#25591) @oliviertassinari
    • [website] Matheus Wichman joins Material-UI (#25590) @oliviertassinari
    • [website] Fix 404 page @oliviertassinari
    • [website] Update Careers page (#24948) @oliviertassinari

    All contributors of this release in alphabetical order: @DanailH, @dtassone, @eps1lon, @mbrookes, @michal-perlakowski, @oliviertassinari

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.32(Apr 27, 2021)

    Apr 27, 2021

    Big thanks to the 15 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ‘ฉโ€๐ŸŽค We have completed the migration to emotion of all components in @material-ui/core. We will focus on the components in @material-ui/lab next.
    • ๐Ÿ’ฅ Make progress with the breaking changes plan. We have done 38 out of 41 breaking changes that can be deprecated. We have done 21 out of the 39 that can't have deprecations. Once done, we will focus on updating the components for better following material design, and to improve the aesthetic.
    • ๐Ÿ’„ Support extending the theme for custom color and size values in all components.
    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @material-ui/[email protected]

    Breaking changes

    • [Table] Rename padding="default" to padding="normal" (#25924) @m4theushw
      -<Table padding="default" />
      -<TableCell padding="default" />
      +<Table padding="normal" />
      +<TableCell padding="normal" />
    • [Button] Rename `pending` prop to `loading` in LoadingButton (#25874) @m4theushw
      -<LoadingButton pending pendingIndicator="Pending..." pendingPosition="end" />
      +<LoadingButton loading loadingIndicator="Pending..." loadingPosition="end" />
    • [ButtonBase] Remove buttonRef prop (#25896) @m4theushw
      -<ButtonBase buttonRef={ref} />
      +<ButtonBase ref={ref} />
      -<Button buttonRef={ref} />
      +<Button ref={ref} />
    • [Checkbox][Switch] Remove checked argument from onChange (#25871) @m4theushw
      function MyCheckbox() {
      - const handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
      + const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      +   const checked =;
        return <Checkbox onChange={handleChange} />;
      function MySwitch() {
      - const handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
      + const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
      +   const checked =;
        return <Switch onChange={handleChange} />;
    • [theme] Remove theme.breakpoints.width helper (#25918) @m4theushw
    • [theme] Remove theme.typography.round helper (#25914) @m4theushw

      The theme.typography.round helper was removed because it was no longer used. If you need it, use the function below:

      function round(value) {
        return Math.round(value * 1e5) / 1e5;


    • [Container] Fix maxWidth="false" resulting in incorrect css (#25869) @mnajdova
    • [core] Improve support for extended props in theme (#25934) @vicasas
    • [core] Fix various too wide `classes` types (AppBar, Card, Link, LoadingButton, MenuItem) (#25917) @eps1lon
    • [Drawer] Fix classes forwarded to DOM node for docked drawer (#25870) @mnajdova
    • [IconButton] Support custom colors and sizes (#25890) @Vikram710
    • [l10n] Add Bengali (bnBD) locale (#25841) @Knoxo
    • [Rating] Support custom sizes (#25922) @vicasas
    • [Select] Fix classes leaking on the DOM (#25894) @siriwatknp
    • [Stack] Fix support of spacing falsy values (#25937) @simonecervini
    • [Table] Migrate TablePagination to emotion (#25809) @siriwatknp
    • [Tabs] Migrate Tabs to emotion (#25824) @siriwatknp
    • [TextField] Remove utlity class name for margin="none" (#25969) @oliviertassinari
    • [TextField] Make the `position` prop required in InputAdornment (#25891) @m4theushw
    • [theme] Remove fade color helper (#25895) @m4theushw

    @material-ui/[email protected]

    • [DateTimePicker] `date` is nullable in `onChange` (#25981) @eps1lon
    • [internal][Pickers] Remove unused TView type argument (#25936) @eps1lon
    • [internal][Pickers] Inline some BasePickerProps usages (#25971) @eps1lon
    • [internal][Pickers] Entangle what *Props vs All*Props means (#25938) @eps1lon
    • [lab] Update slot components to use overridesResolver (#25906) @mnajdova
    • [Timeline] Remove use of nth-child in favor of nth-of-type (#25915) @wellwellmissesanderson
    • [Timeline] Migrate Timeline to emotion (#25838) @siriwatknp
    • [TreeView] Migrate TreeItem to emotion (#25835) @siriwatknp

    @material-ui/[email protected]

    • [styled-engine] Skip variants resolver for non root slots by default (#25865) @mnajdova

    @material-ui/[email protected]

    • [system] Add missing `main` entry for styleFunctionSx (#25885) @eps1lon

    @material-ui/[email protected]

    This package is just re-released since version 5.1.7 had a breaking change.


    • [Autocomplete] Fix tagSize class typo (#25908) @JanMisker
    • [DataGrid] Update docs sections (#25980) @dtassone
    • [docs] Batch small fixes (#25807) @m4theushw
    • [docs] Explicitly list demos of unstyled components (#25900) @eps1lon
    • [docs] Expose heading links in a11y tree (#25861) @eps1lon
    • [docs] Fix minor typo (#26001) @onpaws
    • [docs] Fix global styles leaking on different pages (#25855) @mnajdova
    • [docs] Fix Typography api docs for `paragraph` prop (#25929) @DanailH
    • [docs] Fix Slider's classes wrong description (#25907) @mnajdova
    • [docs] Grammar correction in autocomplete API (#25910) @gruber76
    • [docs] Require documentation of demos (#25811) @eps1lon
    • [docs] Update minimum required TypeScript version (#25930) @eps1lon
    • [Table] Improve description of TablePagination.rowsPerPageOptions (#25982) @kevinlul


    • [core] Fix wrong imports to '@material-ui/styles' (#25984) @mnajdova
    • [core] Ensure props spreading works as expected (#25939) @oliviertassinari
    • [core] Batch small changes (#25968) @oliviertassinari
    • [core] Enable trailing comma in TypeScript files (#25931) @eps1lon
    • [core] Remove @typescript-to-proptypes-generate handlers (#25909) @eps1lon
    • [core] Update slots components to enable flatten specificity for overrides (#25853, #25864, #25881, #25884, #25887, #25904, #25892) @mnajdova
    • [test] Add current behavior of inverleaving elements on mousedown (#25903) @eps1lon
    • [test] Add test validator to improve DX (#25854) @siriwatknp
    • [test] Fix duplicate key in TreeItem test (#26000) @mnajdova

    All contributors of this release in alphabetical order: @DanailH, @dtassone, @eps1lon, @gruber76, @JanMisker, @kevinlul, @Knoxo, @m4theushw, @mnajdova, @oliviertassinari, @simonecervini, @siriwatknp, @vicasas, @Vikram710, @wellwellmissesanderson

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.31(Apr 20, 2021)

    Apr 20, 2021

    Big thanks to the 19 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ‘ฉโ€๐ŸŽค Migrate 4 components to emotion.
    • ๐Ÿ’ฅ Resume work on the breaking changes, aim for v5.0.0-beta.0 in the next coming months.
    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @material-ui/[email protected]

    Breaking changes

    • [FormControl] Change default variant from standard to outlined (#24895) @petyosi Standard has been removed from the Material Design guidelines. This codemod will automatically update your code.

      -<FormControl value="Standard" />
      -<FormControl value="Outlined" variant="outlined" />
      +<FormControl value="Standard" variant="standard" />
      +<FormControl value="Outlined" />
    • [Menu] The selectedMenu variant will not vertically align the selected item with the anchor anymore. (#25691) @m4theushw

    • [Popover] Remove the getContentAnchorEl prop to simplify the positioning logic. (#25691) @m4theushw

    • [Select] Change default variant from standard to outlined (#24895) @petyosi Standard has been removed from the Material Design guidelines. This codemod will automatically update your code.

      -<Select value="Standard" />
      -<Select value="Outlined" variant="outlined" />
      +<Select value="Standard" variant="standard" />
      +<Select value="Outlined" />


    • [Alert] Fix action to be aligned with the text (#25768) @mnajdova
    • [Avatar] Fix onload event not firing when img cached (#25793) @npandrei
    • [Box] Add utility mui class (#25802) @mnajdova
    • [core] Don't call noop event.persist() (#25782) @eps1lon
    • [Dialog] Fix support of custom breakpoint units (#25788) @Vikram710
    • [List] Fix support for list item container style overrides (#25777) @mnajdova
    • [Rating] Allow clearing ratings with arrow keys (#25645) @Vikram710
    • [Rating] Fix focus visible regression (#25698) @oliviertassinari
    • [Select] Fix specificity of style overrides (#25766) @robphoenix
    • [Select] Fix className overwritten (#25815) @siriwatknp
    • [Select] Fix overrides for slots (#25796) @mnajdova
    • [Snackbar] Fix hidden overlay blocking interactions regression (#25739) @MieleVL
    • [TextField] Fix InputAdornment classes (#25749) @mnajdova
    • [theme] Avoid mutating args in createSpacing (#25745) @eps1lon

    @material-ui/[email protected]

    Breaking changes

    • [Pickers] Rename DayPicker to CalendarPicker (#25810) @eps1lon
      -import DayPicker from '@material-ui/lab/DayPicker';
      +import CalendarPicker from '@material-ui/lab/CalendarPicker';
        components: {
      -   MuiDayPicker: {},
      +   MuiCalendarPicker: {},
    • [Pickers] Rename PickersCalendarSkeleton to CalendarPickerSkeleton (#25679) @eps1lon
      -import PickersCalendarSkeleton from '@material-ui/lab/PickersCalendarSkeleton';
      +import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
    • [Pickers] Rename `date` `view` to `day` (#25685) @eps1lon
      -<DatePicker openTo="date" views={['date', 'month']} />
      +<DatePicker openTo="day" views={['day', 'month']} />


    • [DateRangePicker] Add DateRangePickerDay to theme augmentation list (#25758) @ifndefdeadmau5
    • [Pickers] Rename internal DayPickerView to CalendarPickerView (#25817) @eps1lon
    • [Pickers] Remove `TView` generic in CalendarPicker (#25818) @eps1lon
    • [Pickers] Use passive effect to attach close-on-escape listener (#25819) @eps1lon
    • [Timeline] Migrate TimelineDot to emotion (#25830) @vicasas
    • [Timeline] Migrate TimelineContent to emotion (#25781) @siriwatknp
    • [Timeline] Migrate TimelineItem to emotion (#25822) @vicasas
    • [Timeline] Migrate TimelineOppositeContent to emotion (#25816) @vicasas
    • [TrapFocus] Make isEnabled and getDoc optional (#25784) @m4theushw

    @material-ui/[email protected]

    • [styled-engine] Fix shouldForwardProp on slots (#25780) @mnajdova
    • [styled-engine] Improve GlobalStyles props (#25751) @mnajdova

    @material-ui/[email protected]

    • [unstyled] Convert generateUtilityClass(es) to TypeScript (#25753) @eps1lon


    • [Avatar] Set backgroundColor from string (#25789) @Vikram710
    • [docs] Add demos for public picker components (#25812) @eps1lon
    • [docs] Add example with switch dark/light mode (#25823) @Vikram710
    • [docs] Add package headings to 5.0.0-alpha.30 changelog (#25733) @eps1lon
    • [docs] Add unstyled section to all components coming with the package (#25843) @mnajdova
    • [docs] Breakdown Chip demos into smaller ones (#25750) @vicasas
    • [docs] Document circular progress inherit (#25736) @oliviertassinari
    • [docs] Fix /production-error crash (#25839) @eps1lon
    • [docs] Fix ad duplication (#25831) @oliviertassinari
    • [docs] Fix autocommplete disable event value (#25752) @oliviertassinari
    • [docs] Fix inline-preview selection controls (#25834) @oliviertassinari
    • [docs] Fix Horizontally centered demo (#25787) @viditrv123
    • [docs] Improve pickers migration docs from v3 (#25813) @ahmed-28
    • [docs] Move DataGrid editing nav link (#25769) @dtassone
    • [docs] Replace Typography color values with system values (#25805) @oliviertassinari
    • [docs] Remove one inline-style (#25671) @oliviertassinari
    • [docs] Use gender neutral pronoun for Swipeable Drawer (#25775) @catchanuj
    • [examples] Add TypeScript for styled-components engine (#25675) @jqrun
    • [l10n] zhTW refinement (#25786) @shakatoday
    • [Tabs] Add demo for routing with Tabs (#25827) @ahmed-28
    • [website] Add Matheus Wichman (#25801) @m4theushw


    • [core] Batch small changes (#25804) @oliviertassinari
    • [core] Document token permissions of release:changelog (#25732) @eps1lon
    • [core] Error when installing in unsupported node environments (#25795) @eps1lon
    • [core] Fix rgba to hex conversion (#25825) @saeedeyvazy
    • [core] Normalize usage of pseudo classes selectors (#25748) @mnajdova
    • [core] Remove unused public types (#25833) @oliviertassinari
    • [core] Remove incorrect overridesResolver usages (#25778) @mnajdova
    • [test] Use public imports (#25686) @vicasas
    • [core] Use readonly arrays where possible (#25746) @eps1lon

    All contributors of this release in alphabetical order: @ahmed-28, @catchanuj, @dtassone, @eps1lon, @ifndefdeadmau5, @jqrun, @m4theushw, @MieleVL, @mnajdova, @npandrei, @oliviertassinari, @petyosi, @robphoenix, @saeedeyvazy, @shakatoday, @siriwatknp, @vicasas, @viditrv123, @Vikram710

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.30(Apr 12, 2021)

    Apr 12, 2021

    Big thanks to the 21 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ‘ฉโ€๐ŸŽค Migrate 9 components to emotion.
    • ๐Ÿ’„ Support different numbers of columns with the Grid component (#25636) @Avi98.
    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @material-ui/[email protected]

    • [Alert] Vertically align action on top (#25654) @xdshivani
    • [Autocomplete] Fix text field standard visual regression (#25676) @oliviertassinari
    • [CssBaseline] Fix @font-face rule broken in styleOverrides (#25583) @mnajdova
    • [Grid] Support custom number of columns (#25636) @Avi98
    • [InputBase] Fix autofill typo (#25651) @michal-perlakowski
    • [LinearProgress] Add color="inherit" support (#25641) @itscharlieliu
    • [Pagination] Allow to differentiate more item types (#25622) @ruppysuppy
    • [Popover] Add popoverClasses export to type declarations (#25695) @tomasznguyen
    • [Rating] Add highlight selected rating only (#25649) @Vikram710
    • [Rating] Migrate to emotion (#25588) @natac13
    • [Select] Migrate to emotion (#25653) @mnajdova
    • [Select] Migrate NativeSelect to emotion (#24698) @duganbrett
    • [SpeedDial] Fix broken aria reference issue (#25665) @RiyaNegi
    • [Stepper] Migrate MobileStepper to emotion (#25589) @natac13
    • [styles] Outdated warning message (#25637) @bhairavee23
    • [Table] Remove legacy fix for JSS (#25692) @oliviertassinari
    • [Table] Migrate TableSortLabel to emotion (#25638) @natac13
    • [TabPanel] Migrate to emotion (#25646) @tomasznguyen
    • [TextareaAutosize] Fix resizing bug on Firefox (#25634) @bhairavee23
    • [TextField] Add textFieldClasses export to type declarations (#25696) @tomasznguyen
    • [theme] Change default bgColor to white in light mode (#25730) @saleebm
    • [ToggleButton] Add fullWidth prop (#25585) @hcz
    • [typescript] Add muiName to declarations (#25689) @michal-perlakowski

    @material-ui/[email protected]

    • [Timeline] Migrate TimelineSeparator to emotion (#25666) @vicasas
    • [Timeline] Migrate TimelineConnector to emotion (#25663) @vicasas
    • [TimePicker] Use clock icon when editing in mobile mode (#25569) @alcwhite
    • [TreeView] Migrate to emotion (#25673) @tomasznguyen


    • [blog] Fix typos @oliviertassinari
    • [docs] Migrate TextField demos to emotion (#25626) @vicasas
    • [docs] Bump stylis-plugin-rtl requirement (#25661) @mnajdova
    • [docs] Ensure old api-docs translations are cleaned (#25680) @eps1lon
    • [docs] Fix typo in v4 migration doc (#25678) @thameera
    • [docs] Fix useLayoutEffect warning (#25670) @oliviertassinari
    • [docs] Fix a11y issue in the SpeedDial docs (#25669) @RiyaNegi
    • [docs] Cover TypeScript commands in codemod readme (#25640) @StuffByLiang
    • [docs] Migrate Popover demos to emotion (#25620) @vicasas
    • [docs] Fix typo in switches and checkboxes doc (#25639) @dimitropoulos
    • [docs] Add interoperability section for Portal (#25575) @mnajdova
    • [docs] Fix side nav scroll position (#25619) @misaka3
    • [website] Q1 2021 Update (#25591) @oliviertassinari
    • [website] Matheus Wichman joins Material-UI (#25590) @oliviertassinari


    • [test] Use public api in lab (#25682) @vicasas
    • [test] Test types of .spec lab files (#25684) @eps1lon
    • [core] Fix build step for unstyled package (#25672) @oliviertassinari
    • [core] Ensure react-is uses v17 (#25668) @eps1lon

    All contributors of this release in alphabetical order: @alcwhite, @bhairavee23, @dimitropoulos, @duganbrett, @eps1lon, @hcz, @itscharlieliu, @michal-perlakowski, @misaka3, @mnajdova, @natac13, @oliviertassinari, @RiyaNegi, @ruppysuppy, @saleebm, @StuffByLiang, @thameera, @tomasznguyen, @vicasas, @Vikram710, @xdshivani

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.29(Apr 4, 2021)

    Apr 4, 2021

    Big thanks to the 26 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ™Œ Add support in the Grid for any spacing value (#25503) @ZakMiller. For instance:

      <Grid container spacing={1.5}>
      <Grid container spacing="30px">

      This feature was made possible by the recent migration to emotion. You can find other issues on the Grid component unlocked by the migration to emotion. They are ready to be worked on.

    • ๐Ÿ‘ฉโ€๐ŸŽค Convert 3 components to emotion (#25541, #25516, #25521) @rajzik, @praveenkumar-kalidass, @siriwatknp. @material-ui/core has been migrated at 94% (7 components lefts we will handle in the next release), @material-ui/lab has been migrated at 3% (39 components left).

    • ๐Ÿ“š Migrate 8 component demo pages to the sx, Stack, and styled API @vicasas.

    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @material-ui/[email protected]

    • [AppBar] Fix type support of overridable component (#25456) @heleg
    • [Autocomplete] Fix Async demo in docs (#25536) @kanish671
    • [Autocomplete] Fix TypeScript wrapper example (#25530) @JanKaczmarkiewicz
    • [Backdrop] Remove z-index: -1 (#25524) @silver-snoopy
    • [Card] Add component prop support (#25537) @silver-snoopy
    • [CssBaseline] Migrate ScopedCssBaseline to emotion (#25541) @rajzik
    • [Divider] Support middle variant with vertical orientation (#25428) @vedadeepta
    • [Grid] Support decimal spacing (#25503) @ZakMiller
    • [List] Remove background inheritance of ListSubheader (#25532) @tanmoyopenroot
    • [Paper] Support dark mode brightening based on elevation (#25522) @m4theushw
    • [Select] Fix selection of non-options (#25567) @oliviertassinari
    • [Select] Set aria-expanded to false when listbox is collapsed (#25545) @Harish-Karthick
    • [SpeedDial] Call focus on escape (#25509) @tanmoyopenroot
    • [Stack] Add component prop (#25526) @silver-snoopy
    • [Stack] Fix the :not selector (#25484) @Andarist
    • [Stepper] Migrate StepButton to emotion (#25516) @praveenkumar-kalidass
    • [Stepper] Migrate Stepper to emotion (#25521) @siriwatknp
    • [Tabs] Don't animate scroll on first render (#25469) @manziEric
    • [Tooltip] Fix forwarded classes (#25535) @silver-snoopy

    @material-ui/[email protected]

    • [Slider] Allow disabling the left and right thumbs swap (#25547) @michal-perlakowski

    @material-ui/[email protected]

    • [DateRangePicker] Fix props naming in DatePicker components (#25504) @callmeberzerker
    • [DateRangePickerInput][internal] Inline makeDateRangePicker calls (#25470) @eps1lon
    • [StaticDateRangePicker] Fix inconsistent name for theme props (#25483) @eps1lon
    • [Pickers] Move own internals from lab internals to dedicated file (#25498) @eps1lon


    • [docs] Provide an alternative to right-to-left (#25584) @dariusk
    • [docs] Add note for typescript on the styled() customization guide (#25576) @mnajdova
    • [docs] Replace incorrect instances of defined with define (#25572) @surajpoddar16
    • [docs] Fix spelling error in file (#25570) @Brlaney
    • [docs] Migrate Card demos to emotion (#25557) @vicasas
    • [docs] Fix typo in data grid (#25561) @michael-001
    • [docs] Migrate Menu demos to emotion (#25554) @vicasas
    • [docs] Fix style in dark mode (#25551) @m4theushw
    • [docs] Document changing skeleton color (#25542) @ZakMiller
    • [docs] Improve coverage of TypeScript theme augmentation (#25489) @ashishshuklabs
    • [docs] Update (#25534) @nguyenyou
    • [docs] Migrate Portal demos to emotion (#25505) @vicasas
    • [docs] Migrate NoSSR demos to emotion (#25506) @vicasas
    • [docs] Migrate ClickAwayListener demos to emotion (#25507) @vicasas
    • [docs] Cover change of React support (#25487) @oliviertassinari
    • [docs] Migrate Transitions demos to emotion (#25488) @vicasas
    • [docs] Fix Stack divider demo (#25491) @oliviertassinari
    • [docs] Migrate Icons demos to emotion (#25412) @vicasas


    • [core] Use latest TypeScript in typescript-to-proptypes (#25512) @eps1lon
    • [core] Update the codesandbox issue templates (#25501) @oliviertassinari
    • [test] Wait on e2e server to start before starting runner (#25476) @eps1lon

    All contributors of this release in alphabetical order: @Andarist, @ashishshuklabs, @Brlaney, @callmeberzerker, @dariusk, @eps1lon, @Harish-Karthick, @heleg, @JanKaczmarkiewicz, @kanish671, @m4theushw, @manziEric, @michael-001, @michal-perlakowski, @mnajdova, @nguyenyou, @oliviertassinari, @praveenkumar-kalidass, @rajzik, @silver-snoopy, @siriwatknp, @surajpoddar16, @tanmoyopenroot, @vedadeepta, @vicasas, @ZakMiller

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.28(Mar 24, 2021)

    Mar 24, 2021

    Big thanks to the 34 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ‘ฉโ€๐ŸŽค Convert 9 components to emotion (#25267, #25216, #25264, #25197, #25372, #25281, #25210, #25279, #2528) @natac13 @tomasznguyen @kayuapi. 85% of the components have been migrated so far, thanks to the help of the community. We keep track of the progress in

    • Add a new Stack component (#25149) @souporserious The component allows to workaround the lack of support for the CSS flexbox gap property across browsers.


      See the documentation for more details.

    • ๐Ÿ“š Migrate 18 component demo pages to the sx, Stack, and styled API @vicasas. 57% of the documentation pages have been migrated. This was also an importunity to breakdown the existing large demos into smaller and more focused ones. We keep track of the progress in

    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @material-ui/[email protected]

    Breaking changes

    • [core] Drop support for React 16 (#25464) @eps1lon
    • [core] Drop support for node 10 (#25306) @eps1lon


    • [Autocomplete] Warn when the input didn't resolve in time (#25311) @LaneRamp
    • [Autocomplete] Fix styleOverrides support (#25276) @manziEric
    • [ButtonBase] Allow to customize the link component via theme (#25331) @vedadeepta
    • [ButtonBase] Fix default type attribute (submit -> button) (#25323) @RTEYL
    • [ButtonGroup] Support custom colors (#25413) @oliviertassinari
    • [CircularProgress] Fix animation when disableShrink={true} (#25247) @duongdev
    • [Dialog] Fix typo (#25287) @aheimlich
    • [Dialog] Migrate DialogContentText to emotion (#25267) @tomasznguyen
    • [Dialog] Migrate Dialog to emotion (#25216) @natac13
    • [Drawer] Fix RTL support (#25453) @silver-snoopy
    • [Menu] Migrate to emotion (#25264) @tomasz-crozzroads
    • [Paper] Fix component prop type error (#25426) @heleg
    • [Popover] Migrate to emotion (#25197) @tomasznguyen
    • [Radio] Fix html structure (#25398) @oliviertassinari
    • [Select] Fix focus background when variant="outlined" (#25393) @christiaan
    • [Slider] Add `tabIndex` prop (#25388) @johnloven
    • [Snackbar] Fix prop type error for 'key' prop (#25431) @jansedlon
    • [SpeedDial] Reset tooltip state when the speed dial is closed (#25259) @m4theushw
    • [Stack] Add new component (#25149) @souporserious
    • [Stepper] Migrate StepLabel to emotion (#25372) @praveenkumar-kalidass
    • [Stepper] Migrate StepIcon to emotion (#25281) @praveenkumar-kalidass
    • [Stepper] Migrate StepContent to emotion (#25210) @praveenkumar-kalidass
    • [SwipeableDrawer] Fix hideBackDrop support (#25275) @manziEric
    • [Table] Fix duplicated keys in TablePagination rows per page (#25309) @martinfrancois
    • [Table] Consistency with DataTable (#25414) @oliviertassinari
    • [TextField] Size small for multiline (#25423) @julihereu
    • [TextField] Migrate InputAdornment to emotion (#25279) @kayuapi
    • [TextField] Migrate to emotion (#25286) @tomasznguyen
    • [ToggleButton] Add color prop (#25390) @AlfredoGJ
    • [Tooltip] Make `disableFocusListener` prop comment clearer (#25455) @jansedlon
    • [Tooltip] Fix placement regression (#25255) @oliviertassinari
    • [Transition] Add easing prop to override default timing function (#25245) @jeferson-sb

    @material-ui/[email protected]

    • [Pickers] Follow "private by default" in makeDateRangePicker (#25424) @eps1lon
    • [Pickers] Simplify internals of *Wrapper components (#25369) @eps1lon
    • [Pickers] Remove `make*` HOCs (#25172) @eps1lon
    • [Pickers] Remove propTypes in production for exotic components (#25261) @eps1lon
    • [Pickers] Unify ref behavior (#25425) @eps1lon
    • [Pickers] Sort properties (#25473) @eps1lon

    @material-ui/[email protected]

    • [utils] Fix useForkRef typings rejecting nullish (#25468) @eps1lon
    • [utils] Allow functional updates in TypeScript declaration of useControlled (#25378) @MikhailTSE
    • [utils] Add a new integer propType (#25224) @fayzzzm


    • [docs] Fix typo in (#25384) @Tollwood
    • [docs] Use defaultCodeOpen where appropriate (#25418) @eps1lon
    • [docs] Support RTL with styled components (#25457) @silver-snoopy
    • [docs] Improve the docs of the Grid component (#25429) @oliviertassinari
    • [docs] Migrate Switch demos to emotion (#25366) @vicasas
    • [docs] Use Stack in demos (#25419) @vicasas
    • [docs] Migrate Checkbox demos to emotion (#25394) @vicasas
    • [docs] Migrate Radio demos to emotion (#25396) @vicasas
    • [docs] Update icon link to (#25410) @BGehrels
    • [docs] Migrate Avatar demos to emotion (#25375) @vicasas
    • [docs] Fix multiline textfields docs to use minRows/maxRows (#25383) @saleebm
    • [docs] Consolidate environment variables into next.config (#25386) @eps1lon
    • [docs] Use `env` next config over DefinePlugin (#25373) @eps1lon
    • [docs] Migrate SpeedDial to emotion (#25367) @vicasas
    • [docs] Refine the used prop-type to discriminate number from integer (#25334) @fayzzzm
    • [docs] Migrate AppBar demos to emotion (#25335) @m4theushw
    • [docs] Migrate Grid demos to emotion (#25332) @vicasas
    • [docs] Migrate Toggle Button demos to emotion (#25333) @vicasas
    • [docs] Migrate Links demos to emotion (#25303) @vicasas
    • [docs] Migrate Breadcrumbs demos to emotion (#25302) @vicasas
    • [docs] Migrate Image List demos to emotion (#25301) @vicasas
    • [docs] Bring clarity about the IE 11 support policy: it's partial (#25262) @oliviertassinari
    • [docs] Add the new demo page for the data grid (#25284) @DanailH
    • [docs] Migrate List demos to emotion (#25266) @vicasas
    • [docs] Migrate Chip demos to emotion (#25268) @vicasas
    • [docs] Add missing props to *DatePicker API (#25254) @eps1lon
    • [docs] Improve accessibility of the basic menu demo (#25207) @ee0pdt
    • [docs] Migrate Fab demos to emotion (#25251) @vicasas
    • [docs] Migrate Rating demos to emotion (#25252) @vicasas
    • [docs] Migrate Transfer List demos to emotion (#25253) @vicasas
    • [docs] Remove dead generatePropTypeDescription method (#25188) @fayzzzm
    • [docs] Migrate Skeleton demos to emotion (#25212) @vicasas
    • [docs] Migrate Paper demos to emotion (#25213) @vicasas
    • [docs] Migrate Container demos to emotion (#25220) @vicasas
    • [docs] Add GlobalStyles API (#25191) @eps1lon


    • [benchmark] Set intended environment (#25402) @eps1lon
    • [core] Remove .propTypes when the props are empty (#25193) @eps1lon
    • [core] Fix allSettled usage (#25461) @eps1lon
    • [core] Switch to React 17 (#25416) @eps1lon
    • [core] Bump missed node versions (#25385) @eps1lon
    • [core] Batch small changes (#25330) @oliviertassinari
    • [core] Use Promise.allSettled over .all where appropriate (#25315) @eps1lon
    • [test] Use fixture terminology in e2e and visual regression tests (#25466) @eps1lon
    • [test] Create end-to-end testing CI job (#25405) @eps1lon
    • [test] Transpile more similar to prod bundle (#25406) @eps1lon
    • [test] Minor improvements to `describeConformance` (#25297) @eps1lon
    • [test] Fix warnings in the demos (#25140) @oliviertassinari
    • [test] Convert createClientRender to TypeScript (#25249) @eps1lon
    • [test] Increase ttp setup timeout (#25248) @eps1lon
    • [test] Improve typescript-to-proptypes test suite (#25209) @eps1lon

    All contributors of this release in alphabetical order: @aheimlich, @AlfredoGJ, @BGehrels, @christiaan, @DanailH, @duongdev, @ee0pdt, @eps1lon, @fayzzzm, @heleg, @jansedlon, @jeferson-sb, @johnloven, @julihereu, @kayuapi, @LaneRamp, @m4theushw, @manziEric, @martinfrancois, @MikhailTSE, @natac13, @oliviertassinari, @praveenkumar-kalidass, @RTEYL, @saleebm, @silver-snoopy, @souporserious, @Tollwood, @tomasz-crozzroads, @tomasznguyen, @vedadeepta, @vicasas

    Source code(tar.gz)
    Source code(zip)
  • v5.0.0-alpha.27(Mar 5, 2021)

    Mar 5, 2021

    Big thanks to the 12 contributors who made this release possible. Here are some highlights โœจ:

    • ๐Ÿ‘ฉโ€๐ŸŽค Convert 8 components to emotion (#25091, #25158, #25146, #25142, #25166) @natac13, @mngu, @m4theushw, @praveenkumar-kalidass.
    • ๐Ÿ“š Convert 5 components demos to emotion (#25164, #25183, #25180, #25145, #25138) @vicasas
    • And many more ๐Ÿ› bug fixes and ๐Ÿ“š improvements.

    @material-ui/[email protected]

    • [Autocomplete] Support readonly type for the options (#25155) @silver-snoopy
    • [Drawer] Migrate to emotion (#25091) @natac13
    • [LinearProgress] Migrate to emotion (#25158) @mngu
    • [Pagination] Migrate Pagination and PaginationItem to emotion (#25146) @mngu
    • [Radio] Migrate to emotion (#25152) @mngu
    • [Snackbar] Migrate to emotion (#25142) @m4theushw
    • [SpeedDial] Migrate to emotion (#25166) @m4theushw
    • [Stepper] Migrate StepConnector to emotion (#25092) @praveenkumar-kalidass
    • [styled] Fix override logic to support component without root (#25143) @niting143
    • [Table] Remove default role logic in TableCell (#25105) @silver-snoopy
    • [Table] Use primary cover over secondary for selected state (#25182) @beaudry
    • [theme] Fix styleOverrides with nested selectors (#25156) @ruppysuppy

    @material-ui/[email protected]

    • [system] Fix behavior of visuallyHidden when used with `sx` prop (#25110) @niting143

    @material-ui/[email protected]

    Breaking changes

    • [Pickers] Remove `dateAdapter` prop (#25162) @eps1lon

    The prop didn't solve any important problem better than any of its alternatives do.

    -<DatePicker dateAdapter={x} />
    +<LocalizationProvider dateAdapter={x}>
    +  <DatePicker />


    • [Pickers][internal] Use React.forwardRef instead of forwardedRef prop (#25173) @eps1lon

    @material-ui/[email protected]

    • [styles] Use capitalize from utils (#25136) @eps1lon


    • [docs] Migrate Bottom Navigation demos to emotion (#25180) @vicasas
    • [docs] Migrate Button demos to emotion (#25138) @vicasas
    • [docs] Migrate Divider demos to emotion (#25145) @vicasas
    • [docs] Migrate Pagination demos to emotion (#25183) @vicasas
    • [docs] Migrate Typography demos to emotion (#25164) @vicasas
    • [docs] Remove CircleCI from backers (#24801) @mbrookes
    • [docs] Update the used testing libraries (#25144) @oliviertassinari


    • [CHANGELOG] Better document breaking changes @oliviertassinari
    • [core] Modernize icons `builder:src` (#25137) @eps1lon
    • [core] Properly use BABEL_ENV test and development (#25139) @eps1lon
    • [test] Add (manual) visual regression test for icons (#25160) @eps1lon

    All contributors of this release in alphabetical order: @beaudry, @eps1lon, @m4theushw, @mbrookes, @mngu, @natac13, @niting143, @oliviertassinari, @praveenkumar-kalidass, @ruppysuppy, @silver-snoopy, @vicasas

    Source code(tar.gz)
    Source code(zip)
React components for faster and easier web development. Build your own design system, or start with Material Design.
๐ŸŒˆ 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 frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 18k Oct 11, 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.2k Oct 16, 2021
Pre-styled card form to subscribe emails to a newsletter and other lists (for Mailchimp + TinyLetter)

React Subscribe Card Requirements Requires React and... Mailchimp account or TinyLetter account Example import React from "react"; import SubscribeCar

null 9 Sep 12, 2021
Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit System.

Timeless 141 Oct 20, 2021
Search UI. Libraries for the fast development of modern, engaging search experiences.

Libraries for the fast development of modern, engaging search experiences. ?? Contents About Search UI Getting started Creating a search experience FA

elastic 1.5k Oct 18, 2021
Mineral UI is a design system and React component library for the web that lets you quickly build high-quality, accessible apps.

Mineral UI is a design system and React component library for the web that lets you quickly build high-quality, accessible apps.

Mineral UI 544 Sep 30, 2021
A React-based UI toolkit for the web

Blueprint Blueprint is a React-based UI toolkit for the web. It is optimized for building complex, data-dense web interfaces for desktop applications

Palantir Technologies 18.2k Oct 17, 2021
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDBootstrap 1.2k Oct 14, 2021
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.1k Oct 15, 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 16, 2021
Cross platform UI controls for progressive web and hybrid apps (plain JS, jQuery, Angular and React)

Mobiscroll What is Mobiscroll? Mobiscroll is a UI library for progressive webapps and hybrid development. Created with a lot of attention to usability

Mobiscroll 1.5k Oct 15, 2021
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. npm i rebass Getting Started import React from 'react' import { Bo

Rebass 7.5k Oct 17, 2021
Simple and elegant component-based UI library

Simple and elegant component-based UI library Custom components โ€ข Concise syntax โ€ข Simple API โ€ข Tiny Size Riot brings custom components to all modern

Riot.js 14.6k Oct 17, 2021
A complete opinionated React component library with minimal dependencies powered by ZEISS.

A complete opinionated React component library with minimal dependencies powered by ZEISS. The UI component library contains both, very low-level desi

ZEISS Group 267 Oct 16, 2021
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 261 Aug 5, 2021
โš›๏ธA beautiful and modern React design system.

Shards React is a free, beautiful and modern React UI kit based on Shards. Documentation & Demo โ€ข Official Page Getting Started Getting started with S

DesignRevision 693 Oct 18, 2021
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui. While some cod

Mat Sz 46 Sep 28, 2021
Rheostat is a www, mobile, and accessible slider component built with React

Rheostat A mobile, tablet, desktop, and accessible slider for the web. Install npm install rheostat Initialize As of v3.0.0, the rheostat project reli

Airbnb 1.6k Oct 9, 2021