From 8635e3cee73f1bca357abd2c31dc9954f51c4fce Mon Sep 17 00:00:00 2001 From: Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 1 Nov 2024 07:34:36 -0700 Subject: [PATCH] [docs] Revise Example Projects and Related Projects pages (#44191) --- .../related-projects/related-projects.md | 70 ++++++++++--------- .../example-projects/example-projects.md | 37 +++------- docs/pages/blog/mui-core-v5.md | 2 +- .../components/MaterialUIExampleCollection.js | 12 ---- 4 files changed, 49 insertions(+), 72 deletions(-) diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md index 5a7a1e2b9cd323..93f895c38b3fff 100644 --- a/docs/data/material/discover-more/related-projects/related-projects.md +++ b/docs/data/material/discover-more/related-projects/related-projects.md @@ -1,63 +1,69 @@ # Related projects -

A carefully curated list of third-party tools that expand or build on top of Material UI's component library.

+

A carefully curated list of third-party tools that expand or build on top of Material UI.

-Developers from the community have built some excellent supplemental tools for working with Material UI—this page gathers the best that we've seen. +Developers from the community have built some excellent supplemental tools for working with Material UI—this page highlights some of the best that we've seen. Do you have a project that you think should be featured here? -We'd love to see it. -Feel free to submit a pull request! +Feel free to submit a pull request and the maintainers will work with you to write the description. -## Design resources +## Premium tools -- [UXPin](https://www.uxpin.com/merge/mui-library): A large UI kit of Material UI components. It renders the components in a web runtime and uses the same React implementation as your production environment. +- [ScaffoldHub](https://v2.scaffoldhub.io/scaffolds/react-material-ui?partner=1): -## Theming + - Tool for building web applications. + - Choose your framework and library (React with Material UI). + - Choose your database (SQL, MongoDB or Firestore). + - Model your database and application with the intuitive GUI. + - Generate your application, including a complete scaffolded backend. + - Preview your application online and download the generated code. -- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material UI applications that features live previewing. -- [Material palette generator](https://m2.material.io/inline-tools/color/): The official Material Design palette generator can be used to generate a palette for any color you choose. +- [Divjoy](https://divjoy.com?via=material-ui): -## Components + - Create a Material UI app in minutes. + - Templates, authentication, database integration, subscription payments, and more. -### Layout +## Free tools + +### Admin frameworks + +- [React-admin](https://github.com/marmelab/react-admin): A front-end framework for building data-driven applications running in the browser on top of REST/GraphQL APIs. +- [Refine](https://github.com/refinedev/refine): An open source, headless React meta-framework for the rapid development of web applications. + +### Theming tools + +- [Material palette generator](https://m2.material.io/inline-tools/color/): The official Material Design 2 palette generator tool. + +### Supplementary components + +#### Layout - [MUI Treasury Layout](https://mui-treasury.com/?path=/docs/layout-v6-introduction--docs): Components to handle the overall layout of a page. Check out examples such as [a legacy.reactjs.org clone](https://mui-treasury.com/?path=/story/layout-v6-app-react-legacy--react-legacy). -### Image +#### Image -- [mui-image](https://github.com/benmneb/mui-image): The only Material UI image component to satisfy the Material Design guidelines for loading images. -- [material-ui-image](https://mui.wertarbyte.com/#material-ui-image): Adds a "materializing" effect to images so they fade in like [Material Design's image loading pattern](https://m1.material.io/patterns/loading-images.html) suggests. +- [mui-image](https://github.com/benmneb/mui-image): The only Material UI image component to satisfy the Material Design 2 guidelines for loading images. -### Chips +#### Chips input - [mui-chips-input](https://github.com/viclafouch/mui-chips-input): A chips input designed for use with Material UI. -### Phone Number +#### Phone number input - [mui-tel-input](https://github.com/viclafouch/mui-tel-input): A phone number input designed for use with Material UI, built with [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js). -### One-Time Password +#### One-time password input -- [mui-otp-input](https://github.com/viclafouch/mui-otp-input): A One-Time Password input designed for use with Material UI. +- [mui-otp-input](https://github.com/viclafouch/mui-otp-input): A one-time password input designed for use with Material UI. -### File +#### File input - [mui-file-input](https://github.com/viclafouch/mui-file-input): A file input designed for use with Material UI. -### Color picker +#### Color input - [mui-color-input](https://github.com/viclafouch/mui-color-input): A color input designed for use with Material UI, built with [TinyColor](https://tinycolor.vercel.app/). -- [material-ui-color](https://github.com/mikbry/material-ui-color): Collections of color components for Material UI. No dependencies, small, highly customizable, and supports theming. - -### Rich text - -- [mui-tiptap](https://github.com/sjdemartini/mui-tiptap): A customizable Material UI-styled WYSIWYG (What You See Is What You Get) rich text editor, using [Tiptap](https://tiptap.dev/). -### Sparkline +#### Rich text editor -- [mui-plus](https://mui-plus.vercel.app/components/Sparkline): A sparkline is a tiny chart that can be used to indicate the trend of a value. - -## Admin frameworks - -- [React-admin](https://github.com/marmelab/react-admin): A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs. -- [Refine](https://github.com/refinedev/refine): An open source, headless React meta-framework for the rapid development of web applications. +- [mui-tiptap](https://github.com/sjdemartini/mui-tiptap): A customizable Material UI-styled WYSIWYG rich text editor, built with [Tiptap](https://tiptap.dev/). diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md index 105bdba1951b43..d2d7361b5c11ed 100644 --- a/docs/data/material/getting-started/example-projects/example-projects.md +++ b/docs/data/material/getting-started/example-projects/example-projects.md @@ -1,15 +1,17 @@ # Example projects -

A collection of examples, boilerplates, and scaffolds to jumpstart your next Material UI project.

+

A collection of examples and scaffolds integrating Material UI with popular libraries and frameworks.

-## Integrations +## Official integrations The following integration examples are available in the [`/examples`](https://github.com/mui/material-ui/tree/master/examples) folder of the Material UI GitHub repository. These examples feature Material UI paired with other popular React libraries and frameworks, so you can skip the initial setup steps and jump straight into building. +:::success Not sure which to pick? -We recommend Next.js for server-side rendering, or Vite if you're looking to build a SPA. -See [Start a New React Project](https://react.dev/learn/start-a-new-react-project) from the official React docs to learn more about the options available. +We recommend Next.js for server-side rendering and more opinionated framework features, or Vite for a lightweight single-page app (SPA). +See [Start a New React Project](https://react.dev/learn/start-a-new-react-project) from the official React docs to learn more about some of the options available. +::: @@ -17,29 +19,10 @@ See [Start a New React Project](https://react.dev/learn/start-a-new-react-projec
-## Official themes and templates +## Free templates -Once you've chosen your preferred scaffold above, you could move on to the [Templates](/material-ui/getting-started/templates/) doc and choose a readymade user interface to plug in. +Once you've chosen your preferred scaffold above, you could move on to our collection of [free templates](/material-ui/getting-started/templates/) and install a readymade user interface to get started even faster. -For more complex prebuilt UIs, check out our [premium themes and templates](https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=example-projects-store) in the MUI Store. - -## Community project - -The following projects are maintained by the community and curated by Material UI's team. -They're great resources for learning more about real-world usage of Material UI alongside other popular libraries and tools. - -### Paid +## Premium themes and templates -- [ScaffoldHub](https://v2.scaffoldhub.io/scaffolds/react-material-ui?partner=1): - - - Tool for building web applications. - - Choose your framework and library (React with Material UI). - - Choose your database (SQL, MongoDB or Firestore). - - Model your database and application with the intuitive GUI. - - Generate your application, including a complete scaffolded backend. - - Preview your application online, and download the generated code. - -- [Divjoy](https://divjoy.com?via=material-ui): - - - Create a Material UI app in minutes. - - Templates, authentication, database integration, subscription payments, and more. +For more complex prebuilt UIs, check out our [premium themes and templates](https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=example-projects-store) in the MUI Store. diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md index 184384a2225a15..af5d150e800f9d 100644 --- a/docs/pages/blog/mui-core-v5.md +++ b/docs/pages/blog/mui-core-v5.md @@ -463,7 +463,7 @@ MUI X embodies our initiative to solve the main pain point developers have repo We have heard you, you want **more components**. But, in practice, we wouldn't probably cover all the possible components you might need. It would be a titanic task. -Instead, we are focusing on the **hardest** and **most requested** components, leaving the long tail to our [community of contributors](/material-ui/discover-more/related-projects/#components). +Instead, we are focusing on the **hardest** and **most requested** components, leaving the long tail to our [community of contributors](/material-ui/discover-more/related-projects/#supplementary-components). We started working on this effort over a year ago, in a new GitHub repository: [mui/mui-x](https://github.com/mui/mui-x). You might wonder, why work on it as a different product? Building a great data grid or charting solution takes a considerable amount of time. Taking on the challenge of developing them required us to think about a different monetization strategy and we quickly realized that the team working on MUI X would need to become, at least, two times larger than the one working on MUI Core, which already has the community contribution. diff --git a/docs/src/modules/components/MaterialUIExampleCollection.js b/docs/src/modules/components/MaterialUIExampleCollection.js index e30d49e68a5eca..492f837295ef98 100644 --- a/docs/src/modules/components/MaterialUIExampleCollection.js +++ b/docs/src/modules/components/MaterialUIExampleCollection.js @@ -88,18 +88,6 @@ const examples = [ link: 'https://github.com/mui/material-ui/tree/master/examples/material-ui-gatsby', src: '/static/images/examples/gatsby.svg', }, - { - name: 'React-admin', - label: 'View TypeScript', - link: 'https://github.com/marmelab/material-ui-react-admin', - src: '/static/images/examples/reactadmin.svg', - }, - { - name: 'Refine', - label: 'View TypeScript', - link: 'https://github.com/refinedev/refine/tree/master/examples/with-material-ui-vite', - src: '/static/images/examples/refine.svg', - }, ]; export default function MaterialUIExampleCollection() {