MUI-components
Guidance for styling UI elements using React Material UI
React Templates
Sections of each layout are clearly defined either by comments or use of separate files, making it simple to extract parts of a page (such as a "hero unit", or footer, for example) for reuse in other pages. For multi-part examples, a table in the README at the linked source code location describes the purpose of each file.
Default breakpoints
Each breakpoint (a key) matches with a fixed screen width (a value):
-
xs, extra-small: 0px
-
sm, small: 600px
-
md, medium: 900px
-
lg, large: 1200px
-
xl, extra-large: 1536px
cd /d G:Othersreactvite-project
npm run dev
http://localhost:5173/
Showcase
Check out these public apps using Material UI to get inspired for your next project.
Theming
Here are utilities that can help you customize your theme and ability to change it in browser.
- Create Material-UI Theme - Online tool for creating MUI themes via Material Design Color Tool.
- Material-UI Theme Generator - Material-UI theme/palette generator.
- Material-UI Theme Editor - A tool to generate themes for your MUI-apps by just selecting the colors and having a live preview.
Related Projects
Material-UI Design family of projects.
- material-ui-theme-editor - A tool to generate themes for your Material UI applications that features live previewing.
- Material palette generator - The official Material Design palette generator can be used to generate a palette for any color you choose.
- Components Extra - Provides a set of "molecule" components built on top of Material-UI such as a Footer, a CookiesBanner, a BackToTop button and other complex elements highly customizable to help developers build the macro parts of their UI very quickly. Those components are often duplicated across sites - this library solves this exact problem.
- React Admin - A frontend Framework for building admin applications running in the browser, on top of REST/GraphQL APIs, using ES6, React and Material Design.
- Material UI Snippets - VSCode extension providing snippets.
- Material UI Codemorphs - VSCode extension providing codemods.
- Eslint: detect unused classes - ESLint plugin to detect unused styling classes with
@mui/styles.
Components
A list of UI components built with Material-UI Design.
- Material-UI Password field - A password field using Material-UI.
- Fullscreen Dialog - A fullscreen dialog for Material-UI.
- Material-UI Upload - Upload controls made in Material-UI using FileAPI.
- Super Select Field - Multi-selection autocomplete dropdown component for Material-UI.
- Material JSON Schema Form - Material-UI form generated from json.
- Notistack - Easy snackbars for Material-UI (so you don't have to deal with open/close state of them).
- Material-UI Dropzone - Material-UI component built on top of react-dropzone.
- Formik-Material-UI - Bindings for using Material-UI with formik.
- Redux-Form-Material-UI - Wrapper components to facilitate using Material-UI with Redux Form.
- Final-Form-Material-UI - Wrapper components to facilitate using Material-UI with Final Form.
- Material-UI Auto Rotating Carousel - Material style carousel.
- Material-UI Image - Material style image with loading animation.
- Material-UI Flat Pagination - A flat design pagination component for Material-UI.
- Dx-react-scheduler-Material-UI - A scheduler/calendar component for Material-UI.
- Dx-react-chart-Material-UI - Charts for Material-UI that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more.
- Material-UI Medium Blog - Extended Material-UI Card component to show the Medium blogs.
- React Github Repo Cards - Extended Material-UI Card component to show the GitHub repositories.
- React molecule-components - React molecule-components based on Material-UI.
- Material-UI NestedMenuItem - Drop-in replacement for MUI's MenuItem with infinitely nested menus, and open on hover.
- React-planet - Create circular menus which looks like planets.
