Skip to content

Rename the packages #27666

@oliviertassinari

Description

@oliviertassinari

We are making a change to the terminology used in the project to support the long-term direction. The high order bit is that MUI describes the name of the project/company, core prefixes the core components (the simple, design ones).

Current:

  • @material-ui/core Material design system
  • @material-ui/unstyled The unstyled components
  • @material-ui/system The design system CSS utilities
  • @material-ui/styled-engine The styled() adapter around emotion
  • @material-ui/styled-engine-sc The styled() adapter around styled-components
  • @material-ui/icons

Target:

  • @mui/material Material design system
  • @mui/core The unstyled components
  • @mui/joy The second design system, code name Joy.
  • @mui/system The design system CSS utilities
  • @mui/styled-engine The styled() adapter around emotion
  • @mui/styled-engine-sc The styled() adapter around styled-components
  • @mui/icons-material

This is the result of a longer discussion that happened in https://www.notion.so/mui-org/Rearranging-the-packages-2f700caf8b5e48559fe86ebb648ed91a.
See mui/mui-x#2313 for the counterparts on MUI X.

Why each change?

1. MUI over Material-UI

Developed by Google in 2014, Material-UI is a general-purpose customizable component library to build React applications.

  • @mui is shorter to write, read, and pronounce. I have seen a growing number of instances where community members shorten us to MUI, because simpler.
  • The core components, while mainly currently providing a Material Design UI are meant to be heavily customizable. It has been one of our main focuses in v5 compared to v4. The change acknowledges it.
  • This change laid the groundwork for what's coming next. We have a growing set of unstyled components, a second design system, and a low-code builder coming.

2. The core prefix

Pros

  • The flagship product is the core components, coming in different flavors: multiple themes (light/dark), multiple design systems: Material, Joy and without styles, hooks. Sharing the same prefix between them signals that they are meant to implement the same component scope, to be almost interchangeable.

Cons

  • It's more to read, and write. If size is the main concern, we could use "md" over "material". For instance, it's used by Mdbootstrap.

    • @material-ui/core is 17 chars
    • @mui/core-material is 18 chars
    • @mui/material is 13 chars
    • @mui/md is 7 chars
    • @mui/core-md is 12 chars

3. The unstyled components

We have been hesitating between 4 different names for these components:

  • "unstyled" to emphasize on how they are different from the current mostly used components
  • "headless" to emphasize on the hooks that are available
  • "base" to emphasize on the foundational nature of the package, to resonate with its primary use case.
  • "" nothing, to emphasize on how joy and material are built on top of it.

We have picked "base", so far.

The execution steps

  • Keep the change silent until the community has a migration story, it would be only frustrating otherwise
  • Release v5.0.0-rc.0 with the new package names. It reproduces the strategy we used from material-ui v0 to @material-ui/core v1. It's also the strategy used by Chakra between v0 and v1.
    We have considered doing it sooner, between two v5 beta, but it would make it harder for MUI X to support v4 with v5.
    If we really want to do it sooner, it's an option.
  • Deprecate the last v5 beta releases with a link that expands on the new names of the packages. https://www.npmjs.com/package/@material-ui/core/v/5.0.0-beta.5

Screenshot 2021-09-04 at 12 26 35

  • Update the git folder structure to reflect the new names
  • Add a section in the v5 release blog post about the change of names, explaining the story behind it and what comes next.

cc @mui-org/core

Metadata

Metadata

Assignees

No one assigned

    Labels

    breaking changeIntroduces changes that are not backward compatible.discussion

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions