From 8087943d3064795ae9a4c73878ce00d8f2457401 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 10 Sep 2023 17:42:20 +0200 Subject: [PATCH] [core] Improve DX when browsing the package on npm and GitHub 1. Set logo height to fix layout shift in GitHub Open https://github.com/mui/material-ui/tree/ab2e0574c8180b0af833c3a926873ccf3f50083c#readme and see how the layout moves when the logo loads. --- README.md | 50 ++------ .../getting-started/overview/overview-pt.md | 37 ------ .../getting-started/overview/overview-zh.md | 37 ------ .../base/getting-started/overview/overview.md | 4 +- .../click-away-listener.md | 2 +- .../data/material/components/no-ssr/no-ssr.md | 2 +- .../data/material/components/portal/portal.md | 2 +- .../textarea-autosize/textarea-autosize.md | 2 +- .../material/discover-more/backers/backers.md | 2 +- .../getting-started/overview/overview-pt.md | 35 ------ .../getting-started/overview/overview-zh.md | 35 ------ .../getting-started/overview/overview.md | 4 +- .../understand-mui-packages-pt.md | 117 ------------------ .../understand-mui-packages-zh.md | 117 ------------------ .../understand-mui-packages.md | 4 +- docs/data/styles/basics/basics.md | 4 - .../getting-started/overview/overview-pt.md | 26 ---- .../getting-started/overview/overview-zh.md | 26 ---- .../getting-started/overview/overview.md | 6 +- examples/base-ui-cra-ts/README.md | 2 +- examples/base-ui-cra-ts/src/App.tsx | 2 +- examples/base-ui-cra/README.md | 2 +- examples/base-ui-cra/src/App.js | 6 +- examples/base-ui-vite-tailwind/README.md | 2 +- examples/base-ui-vite-tailwind/src/App.jsx | 6 +- packages/markdown/prepareMarkdown.js | 2 +- packages/mui-base/README.md | 10 +- packages/mui-docs/README.md | 8 -- packages/mui-icons-material/README.md | 8 -- packages/mui-joy/README.md | 8 +- packages/mui-lab/README.md | 10 +- packages/mui-material/README.md | 10 +- packages/mui-styles/README.md | 4 - packages/mui-system/README.md | 6 +- 34 files changed, 41 insertions(+), 557 deletions(-) delete mode 100644 docs/data/base/getting-started/overview/overview-pt.md delete mode 100644 docs/data/base/getting-started/overview/overview-zh.md delete mode 100644 docs/data/material/getting-started/overview/overview-pt.md delete mode 100644 docs/data/material/getting-started/overview/overview-zh.md delete mode 100644 docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md delete mode 100644 docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md delete mode 100644 docs/data/system/getting-started/overview/overview-pt.md delete mode 100644 docs/data/system/getting-started/overview/overview-zh.md diff --git a/README.md b/README.md index 0614fb67f9c100..cf1f22cf102887 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,22 @@

- MUI logo + MUI Core logo

MUI Core

-**MUI Core** contains foundational React UI component libraries for shipping new features faster. +**MUI Core** contains foundational React UI component libraries for shipping new features faster: -- [_Material UI_](https://mui.com/material-ui/getting-started/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system. +- [Material UI](https://mui.com/material-ui/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system. -- [_Joy UI_](https://mui.com/joy-ui/getting-started/) is a beautifully designed library of React UI components. +- [Joy UI](https://mui.com/joy-ui/getting-started/) is a library of beautifully designed React UI components built to spark joy. -- [_Base UI_](https://mui.com/base-ui/getting-started/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features. +- [Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features. -- [_MUI System_](https://mui.com/system/getting-started/) is a collection of CSS utilities to help you rapidly lay out custom designs. +- [MUI System](https://mui.com/system/getting-started/) is a collection of CSS utilities to help you rapidly lay out custom designs.
-**[Stable channel v5](https://mui.com/)** - [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui/material-ui/blob/HEAD/LICENSE) [![npm latest package](https://img.shields.io/npm/v/@mui/material/latest.svg)](https://www.npmjs.com/package/@mui/material) [![npm next package](https://img.shields.io/npm/v/@mui/material/next.svg)](https://www.npmjs.com/package/@mui/material) @@ -39,18 +37,10 @@ Material UI is available as an [npm package](https://www.npmjs.com/package/@mui/material). -**npm:** - ```bash npm install @mui/material @emotion/react @emotion/styled ``` -**yarn:** - -```bash -yarn add @mui/material @emotion/react @emotion/styled -``` -
Older versions @@ -67,18 +57,10 @@ Use `@latest` for the latest stable release. Base UI is available as an [npm package](https://www.npmjs.com/package/@mui/base). -**npm:** - ```bash npm install @mui/base ``` -**yarn:** - -```bash -yarn add @mui/base -``` - **Note**: Base UI is still in beta. We are adding new components regularly and you're welcome to contribute! @@ -86,32 +68,16 @@ We are adding new components regularly and you're welcome to contribute! MUI System is available as an [npm package](https://www.npmjs.com/package/@mui/system). -**npm:** - ```bash npm install @mui/system @emotion/react @emotion/styled ``` -**yarn:** - -```bash -yarn add @mui/system @emotion/react @emotion/styled -``` - Or if you want to use styled-components as the styling engine: -**npm:** - ```bash npm install @mui/material @mui/styled-engine-sc styled-components ``` -**yarn:** - -```bash -yarn add @mui/material @mui/styled-engine-sc styled-components -``` - Visit our [styled-components guide](https://mui.com/material-ui/guides/styled-components/) for more information on configuration. ## Sponsors @@ -176,9 +142,9 @@ Our documentation features [a collection of example projects using Material UI]( ## Documentation -- [Material UI](https://mui.com/material-ui/getting-started/) +- [Material UI](https://mui.com/material-ui) - [Joy UI](https://mui.com/joy-ui/getting-started/) -- [Base UI](https://mui.com/base-ui/getting-started/) +- [Base UI](https://mui.com/base-ui/) - [MUI System](https://mui.com/system/getting-started/) ## Premium themes diff --git a/docs/data/base/getting-started/overview/overview-pt.md b/docs/data/base/getting-started/overview/overview-pt.md deleted file mode 100644 index 9fdaba2f181fa8..00000000000000 --- a/docs/data/base/getting-started/overview/overview-pt.md +++ /dev/null @@ -1,37 +0,0 @@ -- - - -title: Overview -- - - - -# Base UI - Overview - -

Base UI is a library of headless ("unstyled") React UI components and low-level hooks.

- -## Introduction - -Base UI is a library of unstyled React UI components. These components were extracted from [Material UI](/material-ui/getting-started/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. - -Base UI includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. - -With Base UI, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme. - -:::info -**Note:** as of today, Base UI is in alpha. - -We're adding new components and features regularly, and you're welcome to contribute! - -Look for the [`package: base`](https://github.com/mui/material-ui/labels/package%3A%20base) label on open issues and pull requests in the `mui/material-ui` repository on GitHub to see what other community members are working on, and feel free to submit your own. -::: - -## Advantages of Base UI - -- **Ship faster:** Base UI gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch. -- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, Base UI has no built-in styling solution. This means you have complete control over your app's CSS. -- **Accessibility:** Base UI components are built with accessibility in mind. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. - -## Base UI vs. Material UI - -Base UI features many of the same components as [Material UI](/material-ui/getting-started/), but without the Material Design implementation. - -Base UI is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented. - -You could think of Base UI as the "skeletal" or "headless" version of Material UI—in fact, future versions of Material UI (starting with v6) will use these components and hooks for their foundational structure. diff --git a/docs/data/base/getting-started/overview/overview-zh.md b/docs/data/base/getting-started/overview/overview-zh.md deleted file mode 100644 index 9fdaba2f181fa8..00000000000000 --- a/docs/data/base/getting-started/overview/overview-zh.md +++ /dev/null @@ -1,37 +0,0 @@ -- - - -title: Overview -- - - - -# Base UI - Overview - -

Base UI is a library of headless ("unstyled") React UI components and low-level hooks.

- -## Introduction - -Base UI is a library of unstyled React UI components. These components were extracted from [Material UI](/material-ui/getting-started/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. - -Base UI includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. - -With Base UI, you can rapidly build on top of our foundational components using any styling solution you choose—no need to override any default style engine or theme. - -:::info -**Note:** as of today, Base UI is in alpha. - -We're adding new components and features regularly, and you're welcome to contribute! - -Look for the [`package: base`](https://github.com/mui/material-ui/labels/package%3A%20base) label on open issues and pull requests in the `mui/material-ui` repository on GitHub to see what other community members are working on, and feel free to submit your own. -::: - -## Advantages of Base UI - -- **Ship faster:** Base UI gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch. -- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, Base UI has no built-in styling solution. This means you have complete control over your app's CSS. -- **Accessibility:** Base UI components are built with accessibility in mind. We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation. - -## Base UI vs. Material UI - -Base UI features many of the same components as [Material UI](/material-ui/getting-started/), but without the Material Design implementation. - -Base UI is not packaged with any default theme or built-in style engine. This makes it a great choice if you need complete control over how your app's CSS is implemented. - -You could think of Base UI as the "skeletal" or "headless" version of Material UI—in fact, future versions of Material UI (starting with v6) will use these components and hooks for their foundational structure. diff --git a/docs/data/base/getting-started/overview/overview.md b/docs/data/base/getting-started/overview/overview.md index 5a846c71837ea2..c4d732356999d1 100644 --- a/docs/data/base/getting-started/overview/overview.md +++ b/docs/data/base/getting-started/overview/overview.md @@ -8,8 +8,8 @@ title: Overview ## Introduction -Base UI is a library of unstyled React UI components and low-level hooks. -These components were extracted from [Material UI](/material-ui/getting-started/), and are now available as a standalone package. +Base UI is a library of unstyled React UI components and hooks. +These components were extracted from [Material UI](/material-ui/), and are now available as a standalone package. They feature the same robust engineering but without implementing Material Design. Base UI includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md index 53bf10db531401..1b4bab2a8af643 100644 --- a/docs/data/material/components/click-away-listener/click-away-listener.md +++ b/docs/data/material/components/click-away-listener/click-away-listener.md @@ -14,6 +14,6 @@ githubLabel: 'component: ClickAwayListener' :::warning Please refer to the [Click-Away Listener](/base-ui/react-click-away-listener/) component page in the Base UI docs for demos and details on usage. -Click-Away Listener is a part of the standalone [Base UI](/base-ui/getting-started/) component library. +Click-Away Listener is a part of the standalone [Base UI](/base-ui/) component library. It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. ::: diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md index ce9fa3aeab29f8..76aee8922c6972 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -13,6 +13,6 @@ components: NoSsr :::warning Please refer to the [No-SSR](/base-ui/react-no-ssr/) component page in the Base UI docs for demos and details on usage. -No-SSR is a part of the standalone [Base UI](/base-ui/getting-started/) component library. +No-SSR is a part of the standalone [Base UI](/base-ui/) component library. It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. ::: diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index 6d19846dde325c..51216aa1b514d1 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -14,6 +14,6 @@ githubLabel: 'component: Portal' :::warning Please refer to the [Portal](/base-ui/react-portal/) component page in the Base UI docs for demos and details on usage. -Portal is a part of the standalone [Base UI](/base-ui/getting-started/) component library. +Portal is a part of the standalone [Base UI](/base-ui/) component library. It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. ::: diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index 9546880c2b1aae..e5b345c112a288 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -14,6 +14,6 @@ githubLabel: 'component: TextareaAutosize' :::warning Please refer to the [Textarea Autosize](/base-ui/react-textarea-autosize/) component page in the Base UI docs for demos and details on usage. -Textarea Autosize is a part of the standalone [Base UI](/base-ui/getting-started/) component library. +Textarea Autosize is a part of the standalone [Base UI](/base-ui/) component library. It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. ::: diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md index b668bcf2fb31a9..c530912f940a32 100644 --- a/docs/data/material/discover-more/backers/backers.md +++ b/docs/data/material/discover-more/backers/backers.md @@ -67,7 +67,7 @@ via [Open Collective](https://opencollective.com/mui) ### Why is Material UI a "crowd-funded open-source project"? -Material UI (as well as [Base UI](/base-ui/getting-started/) and [Joy UI](/joy-ui/getting-started/)) is open-source to give users great freedom in how they use the software, and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use-cases. To ensure that MUI's component libraries can stand the test of time for our users, they need to be well directed and financially sustainable. +Material UI (as well as [Base UI](/base-ui/) and [Joy UI](/joy-ui/getting-started/)) is open-source to give users great freedom in how they use the software, and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use-cases. To ensure that MUI's component libraries can stand the test of time for our users, they need to be well directed and financially sustainable. The absolute best way to support MUI's libraries ongoing development efforts is to become a sponsor. Crowd-sourced funding enables us to spend the most time directly working on improving MUI's products, which you and other MUI users then benefit from. diff --git a/docs/data/material/getting-started/overview/overview-pt.md b/docs/data/material/getting-started/overview/overview-pt.md deleted file mode 100644 index e66cb29b624292..00000000000000 --- a/docs/data/material/getting-started/overview/overview-pt.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Overview ---- - -# Material UI - Overview - -

Material UI is a library of React UI components that implements Google's Material Design.

- -## Introduction - -Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/). - -It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box. - -Material UI is beautiful by design and features a suite of customization options that make it easy to implement your own custom design system on top of our components. - -:::info -Material UI v5 supports Material Design v2. Adoption of v3 is tentatively planned for Material UI v6—see [the release schedule](https://mui.com/versions/#release-schedule). You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/29345) for future updates. -::: - -## Advantages of Material UI - -- **Ship faster:** thousands of open-source [contributors](https://api7.ai/contributor-graph?chart=contributorOverTime&repo=mui-org/material-ui) have poured countless hours into these components. Focus on your core business logic instead of reinventing the wheel—we've got your UI covered. -- **Beautiful by default:** we're meticulous about our implementation of [Material Design](https://m2.material.io/), ensuring that every Material UI component meets the highest standards of form and function, but diverge from the official spec where necessary to provide multiple great options. -- **Customizability:** the library includes an extensive set of intuitive customizability features. [The templates](https://mui.com/store/) in our store demonstrate how far you can go with customization. -- **Cross-team collaboration:** Material UI's intuitive developer experience reduces the barrier to entry for back-end developers and less technical designers, empowering teams to collaborate more effectively. The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers. -- **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem. It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. You can count on community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). - -## Material UI vs. Base UI - -Material UI and [Base UI](/base-ui/getting-started/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions. - -Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/) (or [styled-components](https://styled-components.com/)). - -Base UI, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, Material UI v6 will use Base UI components and hooks for its foundational structure. diff --git a/docs/data/material/getting-started/overview/overview-zh.md b/docs/data/material/getting-started/overview/overview-zh.md deleted file mode 100644 index e66cb29b624292..00000000000000 --- a/docs/data/material/getting-started/overview/overview-zh.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Overview ---- - -# Material UI - Overview - -

Material UI is a library of React UI components that implements Google's Material Design.

- -## Introduction - -Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/). - -It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box. - -Material UI is beautiful by design and features a suite of customization options that make it easy to implement your own custom design system on top of our components. - -:::info -Material UI v5 supports Material Design v2. Adoption of v3 is tentatively planned for Material UI v6—see [the release schedule](https://mui.com/versions/#release-schedule). You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/29345) for future updates. -::: - -## Advantages of Material UI - -- **Ship faster:** thousands of open-source [contributors](https://api7.ai/contributor-graph?chart=contributorOverTime&repo=mui-org/material-ui) have poured countless hours into these components. Focus on your core business logic instead of reinventing the wheel—we've got your UI covered. -- **Beautiful by default:** we're meticulous about our implementation of [Material Design](https://m2.material.io/), ensuring that every Material UI component meets the highest standards of form and function, but diverge from the official spec where necessary to provide multiple great options. -- **Customizability:** the library includes an extensive set of intuitive customizability features. [The templates](https://mui.com/store/) in our store demonstrate how far you can go with customization. -- **Cross-team collaboration:** Material UI's intuitive developer experience reduces the barrier to entry for back-end developers and less technical designers, empowering teams to collaborate more effectively. The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers. -- **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem. It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. You can count on community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). - -## Material UI vs. Base UI - -Material UI and [Base UI](/base-ui/getting-started/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions. - -Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/) (or [styled-components](https://styled-components.com/)). - -Base UI, by contrast, could be considered the "skeletal" or "headless" counterpart to Material UI—in fact, Material UI v6 will use Base UI components and hooks for its foundational structure. diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md index 05220084808524..25ba92f15259fc 100644 --- a/docs/data/material/getting-started/overview/overview.md +++ b/docs/data/material/getting-started/overview/overview.md @@ -33,9 +33,9 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293 It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. You can count on the community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). -## Material UI vs. Base UI +## Material UI vs. Base UI -Material UI and [Base UI](/base-ui/getting-started/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions. +Material UI and [Base UI](/base-ui/) feature many of the same UI components, but Base UI comes without any default styles or styling solutions. Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/) (or [styled-components](https://styled-components.com/)). diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md deleted file mode 100644 index 7075b8b7610fec..00000000000000 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-pt.md +++ /dev/null @@ -1,117 +0,0 @@ -# Understanding MUI packages - -

An overview of the MUI packages and the relationships between them.

- -## Overview - -- If you want to build a design system based on Material Design, use `@mui/material`. -- If you want to build with components that give you complete control over your app's CSS, use `@mui/base`. -- For CSS utilities to help in laying out custom designs with Material UI or Base UI, use `@mui/system`. - -### Glossary - -- **install** refers to running `yarn add $module` or `npm install $module`. -- **import** refers to making a module API available in your code by adding `import ... from '$module'`. - -## MUI packages - -The following is an up-to-date list of `@mui` public packages. - -- `@mui/material` -- `@mui/base` -- `@mui/system` -- `@mui/styled-engine` -- `@mui/styled-engine-sc` -- `@mui/styles` - -### Understanding MUI's products - -As a company, MUI maintains a suite of open-source and open-core React UI projects. These projects live within two product lines: MUI Core and MUI X. - -The following chart illustrates how MUI's packages are related to one another: - -The first half of the image shows @mui/material and @mui/base as component libraries, and @mui/system and styled engines as styling solutions, both under the MUI Core umbrella. The second half shows @mui/x-data-grid and @mui/x-date-pickers as components from MUI X. - -In this article, we'll only cover the MUI Core packages. Visit the [MUI X Overview](/x/introduction/) for more information about our collection of advanced components. - -## Component libraries - -### Material UI - -Material UI is a comprehensive library of components that features our implementation of Google's Material Design. - -`@mui/system` is included as dependency, meaning you don't need to install or import it separately—you can import its components and functions directly from `@mui/material`. - -### Base UI - -[Base UI](/base-ui/getting-started/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. - -The Base package includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. - -### Using them together - -Imagine you're working on an application that uses `@mui/material` with a custom theme, and you need to develop a new switch component that looks very different from the one found in Material Design. - -In this case, instead of overriding all the styles on the Material UI `Switch` component, you can use the `styled` API to customize the Base `SwitchUnstyled` component from scratch: - -```js -import { styled } from '@mui/material/styles'; -import SwitchUnstyled, { switchUnstyledClasses } from '@mui/base/SwitchUnstyled'; - -const Root = styled('span')(` - position: relative; - display: inline-block; - width: 32px; - height: 20px; - - & .${switchUnstyledClasses.track} { - // ...css - } - - & .${switchUnstyledClasses.thumb} { - // ...css - } -`); - -export default function CustomSwitch() { - const label = { componentsProps: { input: { 'aria-label': 'Demo switch' } } }; - - return ; -} -``` - -## Styling - -### Styled engines - -Material UI relies on styling engines to inject CSS into your app. These engines come in two packages: - -- `@mui/styled-engine` -- `@mui/styled-engine-sc` - -By default, Material UI uses [Emotion](https://emotion.sh/docs/styled) as its styling engine—it's included in the [installation](/material-ui/getting-started/installation/) process. If you plan to stick with Emotion, then `@mui/styled-engine` is a dependency in your app, and you don't need to install it separately. - -If you prefer to use [styled-components](https://styled-components.com/docs/basics#getting-started), then you need to install `@mui/styled-engine-sc` in place of the Emotion packages. -See the [styled-components guide](/material-ui/guides/styled-components/) for more details. - -In either case, you won't interact much with either of these packages beyond installation—they're used internally in `@mui/system`. - -:::warning -**Note:** prior to v5, Material UI used `@mui/styles` as a JSS wrapper. This package is now deprecated and will be removed in the future. Check out [the guide to migrating from v4 to v5](/material-ui/migration/migration-v4/) to learn how to upgrade to a newer solution. -::: - -### MUI System - -MUI System is a collection of CSS utilities to help you rapidly lay out custom designs. It uses the Emotion adapter (`@mui/styled-engine`) as the default style engine to create the CSS utilities. - -#### Advantages of MUI System - -- You have full control of the `theme` object. -- You can use `sx` prop normally as the `styled` API supports it by default. -- You can have themeable components by using `styled` via slots and variants. - -:::warning -To use MUI System, you must install either Emotion or styled-components, because the respective `styled-engine` package depends on it. -::: - -A diagram showing an arrow going from @mui/system to @mui/styled-engine, with a note that it is the default engine. Then, from @mui/styled-engine a solid arrow points to @emotion/react and @emotion/styled while a dashed arrow points to @mui/styled-engine-sc, which points to styled-components. diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md deleted file mode 100644 index 7075b8b7610fec..00000000000000 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages-zh.md +++ /dev/null @@ -1,117 +0,0 @@ -# Understanding MUI packages - -

An overview of the MUI packages and the relationships between them.

- -## Overview - -- If you want to build a design system based on Material Design, use `@mui/material`. -- If you want to build with components that give you complete control over your app's CSS, use `@mui/base`. -- For CSS utilities to help in laying out custom designs with Material UI or Base UI, use `@mui/system`. - -### Glossary - -- **install** refers to running `yarn add $module` or `npm install $module`. -- **import** refers to making a module API available in your code by adding `import ... from '$module'`. - -## MUI packages - -The following is an up-to-date list of `@mui` public packages. - -- `@mui/material` -- `@mui/base` -- `@mui/system` -- `@mui/styled-engine` -- `@mui/styled-engine-sc` -- `@mui/styles` - -### Understanding MUI's products - -As a company, MUI maintains a suite of open-source and open-core React UI projects. These projects live within two product lines: MUI Core and MUI X. - -The following chart illustrates how MUI's packages are related to one another: - -The first half of the image shows @mui/material and @mui/base as component libraries, and @mui/system and styled engines as styling solutions, both under the MUI Core umbrella. The second half shows @mui/x-data-grid and @mui/x-date-pickers as components from MUI X. - -In this article, we'll only cover the MUI Core packages. Visit the [MUI X Overview](/x/introduction/) for more information about our collection of advanced components. - -## Component libraries - -### Material UI - -Material UI is a comprehensive library of components that features our implementation of Google's Material Design. - -`@mui/system` is included as dependency, meaning you don't need to install or import it separately—you can import its components and functions directly from `@mui/material`. - -### Base UI - -[Base UI](/base-ui/getting-started/) is our library of "unstyled" components and hooks. With Base, you gain complete control over your app's CSS and accessibility features. - -The Base package includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. - -### Using them together - -Imagine you're working on an application that uses `@mui/material` with a custom theme, and you need to develop a new switch component that looks very different from the one found in Material Design. - -In this case, instead of overriding all the styles on the Material UI `Switch` component, you can use the `styled` API to customize the Base `SwitchUnstyled` component from scratch: - -```js -import { styled } from '@mui/material/styles'; -import SwitchUnstyled, { switchUnstyledClasses } from '@mui/base/SwitchUnstyled'; - -const Root = styled('span')(` - position: relative; - display: inline-block; - width: 32px; - height: 20px; - - & .${switchUnstyledClasses.track} { - // ...css - } - - & .${switchUnstyledClasses.thumb} { - // ...css - } -`); - -export default function CustomSwitch() { - const label = { componentsProps: { input: { 'aria-label': 'Demo switch' } } }; - - return ; -} -``` - -## Styling - -### Styled engines - -Material UI relies on styling engines to inject CSS into your app. These engines come in two packages: - -- `@mui/styled-engine` -- `@mui/styled-engine-sc` - -By default, Material UI uses [Emotion](https://emotion.sh/docs/styled) as its styling engine—it's included in the [installation](/material-ui/getting-started/installation/) process. If you plan to stick with Emotion, then `@mui/styled-engine` is a dependency in your app, and you don't need to install it separately. - -If you prefer to use [styled-components](https://styled-components.com/docs/basics#getting-started), then you need to install `@mui/styled-engine-sc` in place of the Emotion packages. -See the [styled-components guide](/material-ui/guides/styled-components/) for more details. - -In either case, you won't interact much with either of these packages beyond installation—they're used internally in `@mui/system`. - -:::warning -**Note:** prior to v5, Material UI used `@mui/styles` as a JSS wrapper. This package is now deprecated and will be removed in the future. Check out [the guide to migrating from v4 to v5](/material-ui/migration/migration-v4/) to learn how to upgrade to a newer solution. -::: - -### MUI System - -MUI System is a collection of CSS utilities to help you rapidly lay out custom designs. It uses the Emotion adapter (`@mui/styled-engine`) as the default style engine to create the CSS utilities. - -#### Advantages of MUI System - -- You have full control of the `theme` object. -- You can use `sx` prop normally as the `styled` API supports it by default. -- You can have themeable components by using `styled` via slots and variants. - -:::warning -To use MUI System, you must install either Emotion or styled-components, because the respective `styled-engine` package depends on it. -::: - -A diagram showing an arrow going from @mui/system to @mui/styled-engine, with a note that it is the default engine. Then, from @mui/styled-engine a solid arrow points to @emotion/react and @emotion/styled while a dashed arrow points to @mui/styled-engine-sc, which points to styled-components. diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md index a3877bcc0845b4..1ff4271f9acadd 100644 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md +++ b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md @@ -45,8 +45,8 @@ Material UI is a comprehensive library of components that features our implement ### Base UI -[Base UI](/base-ui/getting-started/) is our library of "unstyled" components and hooks. -With Base, you gain complete control over your app's CSS and accessibility features. +[Base UI](/base-ui/) is a library of unstyled React UI components and hooks. +With Base UI, you gain complete control over your app's CSS and accessibility features. The Base package includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. diff --git a/docs/data/styles/basics/basics.md b/docs/data/styles/basics/basics.md index 1312e237730d66..1ba2cc60ce96ed 100644 --- a/docs/data/styles/basics/basics.md +++ b/docs/data/styles/basics/basics.md @@ -36,11 +36,7 @@ To install and save in your `package.json` dependencies, run: ```bash -// with npm npm install @mui/styles - -// with yarn -yarn add @mui/styles ``` ## Getting started diff --git a/docs/data/system/getting-started/overview/overview-pt.md b/docs/data/system/getting-started/overview/overview-pt.md deleted file mode 100644 index 4cc543eb172561..00000000000000 --- a/docs/data/system/getting-started/overview/overview-pt.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Overview ---- - -# MUI System - Overview - -

MUI System is a collection of CSS utilities for rapidly laying out custom designs with MUI component libraries.

- -## Introduction - -MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/), [Joy UI](/joy-ui/getting-started/), and [Base UI](/base-ui/getting-started/). - -The System gives you a set of flexible, generic wrapper components like [`Box`](/system/react-box/) and [`Container`](/system/react-container/) that can be quickly customized using the `sx` prop. This prop lets you define styles directly within the components themselves, rather than creating bulky and redundant `const` definitions with styled-components. It also gives you direct access to your theme's custom design tokens to ensure consistency in one-off styles. Learn more on [the `sx` prop page](/system/getting-started/the-sx-prop/). - -## Advantages of MUI System - -- **Write less code:** in situations where styled-components would be overkill, the `sx` prop can [replace dozens of lines of code](/system/getting-started/usage/#why-use-mui-system). -- **Write the CSS you already know:** the `sx` prop features a superset of CSS, so it's intuitive to pick up and start working with right away if you're comfortable with CSS. -- **Avoid context-switching:** with styled-components, you frequently have to jump between the usage and the definition to find what you need. With the System, it's all in one place. -- **Forget unnecessary custom names:** if you've ever struggled to come up with a good name for a styled-component, then you'll appreciate skipping that step entirely when using MUI System. - -## MUI System vs. Base UI - -[Base UI](/base-ui/getting-started/) is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as other MUI component libraries like Material UI and Joy UI). - -Base UI is a standalone component library, whereas the System is _supplemental_ in that it's designed to be paired with Base and other MUI components, as well as third-party components. See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System with non-MUI components. diff --git a/docs/data/system/getting-started/overview/overview-zh.md b/docs/data/system/getting-started/overview/overview-zh.md deleted file mode 100644 index 4cc543eb172561..00000000000000 --- a/docs/data/system/getting-started/overview/overview-zh.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Overview ---- - -# MUI System - Overview - -

MUI System is a collection of CSS utilities for rapidly laying out custom designs with MUI component libraries.

- -## Introduction - -MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/), [Joy UI](/joy-ui/getting-started/), and [Base UI](/base-ui/getting-started/). - -The System gives you a set of flexible, generic wrapper components like [`Box`](/system/react-box/) and [`Container`](/system/react-container/) that can be quickly customized using the `sx` prop. This prop lets you define styles directly within the components themselves, rather than creating bulky and redundant `const` definitions with styled-components. It also gives you direct access to your theme's custom design tokens to ensure consistency in one-off styles. Learn more on [the `sx` prop page](/system/getting-started/the-sx-prop/). - -## Advantages of MUI System - -- **Write less code:** in situations where styled-components would be overkill, the `sx` prop can [replace dozens of lines of code](/system/getting-started/usage/#why-use-mui-system). -- **Write the CSS you already know:** the `sx` prop features a superset of CSS, so it's intuitive to pick up and start working with right away if you're comfortable with CSS. -- **Avoid context-switching:** with styled-components, you frequently have to jump between the usage and the definition to find what you need. With the System, it's all in one place. -- **Forget unnecessary custom names:** if you've ever struggled to come up with a good name for a styled-component, then you'll appreciate skipping that step entirely when using MUI System. - -## MUI System vs. Base UI - -[Base UI](/base-ui/getting-started/) is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as other MUI component libraries like Material UI and Joy UI). - -Base UI is a standalone component library, whereas the System is _supplemental_ in that it's designed to be paired with Base and other MUI components, as well as third-party components. See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System with non-MUI components. diff --git a/docs/data/system/getting-started/overview/overview.md b/docs/data/system/getting-started/overview/overview.md index fd93e97d7f7053..e56fa97e7632ce 100644 --- a/docs/data/system/getting-started/overview/overview.md +++ b/docs/data/system/getting-started/overview/overview.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/getting-started/), [Joy UI](/joy-ui/getting-started/), and [Base UI](/base-ui/getting-started/). +MUI System is a set of CSS utilities to help you build custom designs more efficiently when working with MUI component libraries like [Material UI](/material-ui/), [Joy UI](/joy-ui/getting-started/), and [Base UI](/base-ui/). The System gives you a set of flexible, generic wrapper components like [`Box`](/system/react-box/) and [`Container`](/system/react-container/) that can be quickly customized using the `sx` prop. This prop lets you define styles directly within the components themselves, rather than creating bulky and redundant `const` definitions with styled-components. @@ -22,9 +22,9 @@ Learn more on [the `sx` prop page](/system/getting-started/the-sx-prop/). - **Avoid context-switching:** with styled-components, you frequently have to jump between the usage and the definition to find what you need. With the System, it's all in one place. - **Forget unnecessary custom names:** if you've ever struggled to come up with a good name for a styled-component, then you'll appreciate skipping that step entirely when using MUI System. -## MUI System vs. Base UI +## MUI System vs. Base UI -[Base UI](/base-ui/getting-started/) is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as other MUI component libraries like Material UI and Joy UI). +[Base UI](/base-ui/) is a library of "unstyled" React components, while MUI System is a set of utilities for quickly applying styles to those components (as well as other MUI component libraries like Material UI and Joy UI). Base UI is a standalone component library, whereas MUI System is _supplemental_ in that it's designed to be paired with Base UI and other MUI components, as well as third-party components. See the [Custom components page](/system/getting-started/custom-components/) for details on how to use MUI System with non-MUI components. diff --git a/examples/base-ui-cra-ts/README.md b/examples/base-ui-cra-ts/README.md index 1e8f134436f826..d8e73bef37736e 100644 --- a/examples/base-ui-cra-ts/README.md +++ b/examples/base-ui-cra-ts/README.md @@ -1,6 +1,6 @@ # Base UI - Create React App example in TypeScript -[Base UI](https://mui.com/base-ui/getting-started/) is a library of unstyled React UI components which includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. +[Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks. [Create React App](https://create-react-app.dev/) is a framework for quickly creating a new React project without the need to configure complex build tools or development environments. diff --git a/examples/base-ui-cra-ts/src/App.tsx b/examples/base-ui-cra-ts/src/App.tsx index e9baac65989f58..e9c3576e76b3db 100644 --- a/examples/base-ui-cra-ts/src/App.tsx +++ b/examples/base-ui-cra-ts/src/App.tsx @@ -6,7 +6,7 @@ export default function App() {

Base UI + Create React App scaffold (TypeScript)

- Base UI is a library of + Base UI is a library of unstyled React UI components which includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. diff --git a/examples/base-ui-cra/README.md b/examples/base-ui-cra/README.md index 42e32834ae33ae..070caa8cd46b1b 100644 --- a/examples/base-ui-cra/README.md +++ b/examples/base-ui-cra/README.md @@ -1,6 +1,6 @@ # Base UI - Create React App example in JavaScript -[Base UI](https://mui.com/base-ui/getting-started/) is a library of unstyled React UI components which includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. +[Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks. [Create React App](https://create-react-app.dev/) is a framework for quickly creating a new React project without the need to configure complex build tools or development environments. diff --git a/examples/base-ui-cra/src/App.js b/examples/base-ui-cra/src/App.js index 3268c0289f0784..ac2c5fbb40c00c 100644 --- a/examples/base-ui-cra/src/App.js +++ b/examples/base-ui-cra/src/App.js @@ -6,10 +6,8 @@ export default function App() {

Base UI + Create React App scaffold (JavaScript)

- Base UI is a library of - unstyled React UI components which includes prebuilt components with production-ready - functionality, along with low-level hooks for transferring that functionality to other - components. + Base UI is a library of + unstyled React UI components and hooks.
Create React App is a framework for quickly diff --git a/examples/base-ui-vite-tailwind/README.md b/examples/base-ui-vite-tailwind/README.md index 5998f02d864c98..2008ff6ff13a34 100644 --- a/examples/base-ui-vite-tailwind/README.md +++ b/examples/base-ui-vite-tailwind/README.md @@ -1,6 +1,6 @@ # Base UI - Vite.js example with Tailwind CSS -[Base UI](https://mui.com/base-ui/getting-started/) is a library of unstyled React UI components which includes prebuilt components with production-ready functionality, along with low-level hooks for transferring that functionality to other components. +[Base UI](https://mui.com/base-ui/) is a library of unstyled React UI components and hooks. [Vite](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects, consisting of a dev server and a build command diff --git a/examples/base-ui-vite-tailwind/src/App.jsx b/examples/base-ui-vite-tailwind/src/App.jsx index f2f51770bd2830..a46a226dd02e07 100644 --- a/examples/base-ui-vite-tailwind/src/App.jsx +++ b/examples/base-ui-vite-tailwind/src/App.jsx @@ -7,12 +7,10 @@ function App() {
  • - + Base UI {' '} - is a library of unstyled React UI components which includes prebuilt components with - production-ready functionality, along with low-level hooks for transferring that - functionality to other components. + is a library of unstyled React UI components and hooks.
  • diff --git a/packages/markdown/prepareMarkdown.js b/packages/markdown/prepareMarkdown.js index 6447e88dfdfaa9..8af10d4a47c5f8 100644 --- a/packages/markdown/prepareMarkdown.js +++ b/packages/markdown/prepareMarkdown.js @@ -104,7 +104,7 @@ function prepareMarkdown(config) { ## Unstyled :::success -[Base UI](/base-ui/getting-started/) provides a headless ("unstyled") version of this [${title}](${headers.unstyled}). Try it if you need more flexibility in customization and a smaller bundle size. +[Base UI](/base-ui/) provides a headless ("unstyled") version of this [${title}](${headers.unstyled}). Try it if you need more flexibility in customization and a smaller bundle size. ::: `); } diff --git a/packages/mui-base/README.md b/packages/mui-base/README.md index 40e493415bb595..b3c424648eabb1 100644 --- a/packages/mui-base/README.md +++ b/packages/mui-base/README.md @@ -1,24 +1,20 @@ -# @mui/base +# Base UI -This package hosts unstyled React components and hooks that can be used for creating custom design systems. +Base UI is a library of unstyled React UI components and hooks. With Base UI, you gain complete control over your app's CSS and accessibility features. ## Installation Install the package in your project directory with: ```bash -// with npm npm install @mui/base - -// with yarn -yarn add @mui/base ``` ## Documentation -[The documentation](https://mui.com/base-ui/getting-started/) +[The documentation](https://mui.com/base-ui/) ## Contributing diff --git a/packages/mui-docs/README.md b/packages/mui-docs/README.md index cee3e1c8409148..8bdba568db4dc6 100644 --- a/packages/mui-docs/README.md +++ b/packages/mui-docs/README.md @@ -7,22 +7,14 @@ This package hosts the documentation building blocks. Install the package in your project directory with: ```bash -// with npm npm install @mui/docs - -// with yarn -yarn add @mui/docs ``` The docs has a peer dependency on the core components. If you are not already using MUI in your project, you can add it with: ```bash -// with npm npm install @mui/material - -// with yarn -yarn add @mui/material ``` ## Documentation diff --git a/packages/mui-icons-material/README.md b/packages/mui-icons-material/README.md index 9ef3d78006be1b..432e5163d6080c 100644 --- a/packages/mui-icons-material/README.md +++ b/packages/mui-icons-material/README.md @@ -9,11 +9,7 @@ Install the package in your project directory with: ```bash -// with npm npm install @mui/icons-material - -// with yarn -yarn add @mui/icons-material ``` @@ -23,11 +19,7 @@ These components use the Material UI's [SvgIcon](https://mui.com/material-ui/api If you are not already using Material UI in your project, you can add it with: ```bash -// with npm npm install @mui/material - -// with yarn -yarn add @mui/material ``` ## Documentation diff --git a/packages/mui-joy/README.md b/packages/mui-joy/README.md index e91ad89df19be7..76ecf2944f5e83 100644 --- a/packages/mui-joy/README.md +++ b/packages/mui-joy/README.md @@ -1,17 +1,13 @@ -# @mui/joy +# Joy UI -Joy UI is a library of beautifully designed React UI components built to spark joy in the development process. +Joy UI is a library of beautifully designed React UI components built to spark joy. ## Installation Install the package in your project directory with: ```bash -// with npm npm install @mui/joy @emotion/react @emotion/styled - -// with yarn -yarn add @mui/joy @emotion/react @emotion/styled ``` ## Documentation diff --git a/packages/mui-lab/README.md b/packages/mui-lab/README.md index f0b8fdb6fa742e..59b3d9f90539b7 100644 --- a/packages/mui-lab/README.md +++ b/packages/mui-lab/README.md @@ -9,11 +9,7 @@ Install the package in your project directory with: ```bash -// with npm npm install @mui/lab - -// with yarn -yarn add @mui/lab ``` The lab has peer dependencies on the Material Design components and on the Emotion library. @@ -22,15 +18,11 @@ If you are not already using them in your project, you can install with: ```bash -// with npm npm install @mui/material @emotion/react @emotion/styled - -// with yarn -yarn add @mui/material @emotion/react @emotion/styled ``` ## Documentation -[The documentation](https://mui.com/components/about-the-lab/) +[The documentation](https://mui.com/material-ui/about-the-lab/) diff --git a/packages/mui-material/README.md b/packages/mui-material/README.md index 64c573161c403f..084828a332db61 100644 --- a/packages/mui-material/README.md +++ b/packages/mui-material/README.md @@ -1,19 +1,15 @@ -# @mui/material +# Material UI -React components that implement Google's Material Design. +Material UI is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system. ## Installation Install the package in your project directory with: ```bash -// with npm npm install @mui/material - -// with yarn -yarn add @mui/material ``` ## Documentation -[The documentation](https://mui.com/) +[The documentation](https://mui.com/material-ui/) diff --git a/packages/mui-styles/README.md b/packages/mui-styles/README.md index c0786540831552..60738855c6342c 100644 --- a/packages/mui-styles/README.md +++ b/packages/mui-styles/README.md @@ -7,11 +7,7 @@ You can leverage our styling solution, even if you are not using our components. Install the package in your project directory with: ```bash -// with npm npm install @mui/styles - -// with yarn -yarn add @mui/styles ``` ## Documentation diff --git a/packages/mui-system/README.md b/packages/mui-system/README.md index 48e10bac517ae6..1a1bbc28a8d65f 100644 --- a/packages/mui-system/README.md +++ b/packages/mui-system/README.md @@ -1,4 +1,4 @@ -# @mui/system +# MUI System CSS utilities for rapidly laying out custom designs. @@ -9,11 +9,7 @@ Install the package in your project directory with: ```bash -// with npm npm install @mui/system @emotion/react @emotion/styled - -// with yarn -yarn add @mui/system @emotion/react @emotion/styled ``` ## Documentation