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