-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[docs] Revise Example Projects and Related Projects pages (#44191)
- Loading branch information
1 parent
e7783b5
commit 8635e3c
Showing
4 changed files
with
49 additions
and
72 deletions.
There are no files selected for viewing
70 changes: 38 additions & 32 deletions
70
docs/data/material/discover-more/related-projects/related-projects.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,63 +1,69 @@ | ||
# Related projects | ||
|
||
<p class="description">A carefully curated list of third-party tools that expand or build on top of Material UI's component library.</p> | ||
<p class="description">A carefully curated list of third-party tools that expand or build on top of Material UI.</p> | ||
|
||
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/). |
37 changes: 10 additions & 27 deletions
37
docs/data/material/getting-started/example-projects/example-projects.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,45 +1,28 @@ | ||
# Example projects | ||
|
||
<p class="description">A collection of examples, boilerplates, and scaffolds to jumpstart your next Material UI project.</p> | ||
<p class="description">A collection of examples and scaffolds integrating Material UI with popular libraries and frameworks.</p> | ||
|
||
## 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. | ||
::: | ||
|
||
<!-- #default-branch-switch --> | ||
|
||
{{"component": "modules/components/MaterialUIExampleCollection"}} | ||
|
||
<br /> | ||
|
||
## 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters