Skip to content

Commit

Permalink
[docs] Revise Example Projects and Related Projects pages (#44191)
Browse files Browse the repository at this point in the history
  • Loading branch information
samuelsycamore authored Nov 1, 2024
1 parent e7783b5 commit 8635e3c
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 72 deletions.
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/).
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.
2 changes: 1 addition & 1 deletion docs/pages/blog/mui-core-v5.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
12 changes: 0 additions & 12 deletions docs/src/modules/components/MaterialUIExampleCollection.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down

0 comments on commit 8635e3c

Please sign in to comment.