Material UI

This is the documentation for the Material UI package.
It contains comprehensive guides, components, and utilities for building user interfaces.

Components

• App Bar React component: The App Bar displays information and actions relating to the current screen.
• Backdrop React Component: The Backdrop component narrows the user's focus to a particular element on the screen.
• Bottom Navigation React component: The Bottom Navigation bar allows movement between primary destinations in an app.
• Circular, Linear progress React components: Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process.
• CSS Baseline: The CssBaseline component helps to kickstart an elegant, consistent, and simple baseline to build upon.
• Detect click outside React component: The Click-Away Listener component detects when a click event happens outside of its child element.
• How to customize: Learn how to customize Material UI components by taking advantage of different strategies for specific use cases.
• Image List React component: The Image List displays a collection of images in an organized grid.
• InitColorSchemeScript component: The InitColorSchemeScript component eliminates dark mode flickering in server-side-rendered applications.
• Links: The Link component allows you to easily customize anchor elements with your theme colors and typography styles.
• No SSR React component: The No-SSR component defers the rendering of children components from the server to the client.
• Number field React component: A React component for capturing numeric input from users.
• React Accordion component: The Accordion component lets users show and hide sections of related content on a page.
• React Alert component: Alerts display brief messages for the user without interrupting their use of the app.
• React Autocomplete component: The autocomplete is a normal text input enhanced by a panel of suggested options.
• React Avatar component: Avatars are found throughout material design with uses in everything from tables to dialog menus.
• React Badge component: Badge generates a small badge to the top-right of its child(ren).
• React Box: The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
• React Breadcrumbs component: A breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors.
• React Button component: Buttons allow users to take actions, and make choices, with a single tap.
• React Button Group component: The ButtonGroup component can be used to group related buttons.
• React Card component: Cards contain content and actions about a single subject.
• React Checkbox component: Checkboxes allow the user to select one or more items from a set.
• React Chip component: Chips are compact elements that represent an input, attribute, or action.
• React Container component: The container centers your content horizontally. It's the most basic layout element.
• React Dialog component: Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
• React Divider component: The Divider component provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy.
• React Drawer component: The navigation drawers (or "sidebars") provide ergonomic access to destinations in a site or app functionality such as switching accounts.
• React Floating Action Button (FAB) component: A Floating Action Button (FAB) performs the primary, or most common, action on a screen.
• React Grid component: The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
• React GridLegacy component: The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
• React Icon Component: Guidance and suggestions for using icons with Material UI.
• React List component: Lists are continuous, vertical indexes of text or images.
• React Masonry component: Masonry lays out contents of varying dimensions as blocks of the same width and different height with configurable gaps.
• React Menu component: Menus display a list of choices on temporary surfaces.
• React Modal component: The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
• React Pagination component: The Pagination component enables the user to select a specific page from a range of pages.
• React Paper component: The Paper component is a container for displaying content on an elevated surface.
• React Popover component: A Popover can be used to display some content on top of another.
• React Popper component: A Popper can be used to display some content on top of another. It's an alternative to react-popper.
• React Portal component: The Portal component lets you render its children into a DOM node that exists outside of the Portal's own DOM hierarchy.
• React Radio Group component: The Radio Group allows the user to select one option from a set.
• React Rating component: Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.
• React Select component: Select components are used for collecting user provided information from a list of options.
• React Skeleton component: Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
• React Slider component: Sliders allow users to make selections from a range of values.
• React Snackbar component: Snackbars (also known as toasts) are used for brief notifications of processes that have been or will be performed.
• React Speed Dial component: When pressed, a floating action button can display three to six related actions in the form of a Speed Dial.
• React Stack component: Stack is a container component for arranging elements vertically or horizontally.
• React Stepper component: Steppers convey progress through numbered steps. It provides a wizard-like workflow.
• React Switch component: Switches toggle the state of a single setting on or off.
• React Table component: Tables display sets of data. They can be fully customized.
• React Tabs component: Tabs make it easy to explore and switch between different views.
• React Text Field component: Text Fields let users enter and edit text.
• React Timeline component: The timeline displays a list of events in chronological order.
• React Tooltip component: Tooltips display informative text when users hover over, focus on, or tap an element.
• React Transition component: Transitions help to make a UI expressive and easy to use.
• React Typography component: Use typography to present your design and content as clearly and efficiently as possible.
• Textarea Autosize React component: The Textarea Autosize component automatically adjusts its height to match the length of the content within.
• Toggle Button React component: A Toggle Button can be used to group related options.

Design Resources

• Material UI for Figma: Enhance designer-developer collaboration between Material UI and Figma.
• Material UI Sync plugin 🧪: Sync is a Figma plugin that generates Material UI themes directly from design to code.

Discover More

• Showcase: Check out these public apps using Material UI to get inspired for your next project.
• Related projects: A carefully curated list of tools that expand or build on top of Material UI.
• Roadmap: Keep up with ongoing projects and help shape the future of Material UI.
• Sponsors and Backers: Support the development of the open-source projects of the MUI organization through crowdfunding.
• Vision: Our vision is to provide an elegant React implementation of the Material Design guidelines that can be customized to fully match your brand.
• Changelog: Material UI follows Semantic Versioning 2.0.0.

Material UI

• Material UI components: Every Material UI component available so far.
• Transfer list React component: A Transfer List (or "shuttle") enables the user to move one or more list items between lists.
• Media queries in React for responsive design: This React hook listens for matches to a CSS media query. It allows the rendering of components based on whether the query matches or not.

Getting Started

• Installation: Install Material UI, the world's most popular React UI framework.
• Usage: Learn the basics of working with Material UI components.
• Model Context Protocol (MCP) for MUI: Access the official Material UI docs and code examples in your AI client.
• Example projects: A collection of examples and scaffolds integrating Material UI with popular libraries and frameworks.
• New Free React Templates: Browse our collection of free React templates to get started building your app with Material UI, including a React dashboard, React marketing page, and more.
• Learning resources: New to Material UI? Get up to speed quickly with our curated list of learning resources.
• Design resources: Be more efficient designing and developing with the same library.
• Frequently Asked Questions: Stuck on a particular problem? Check some of these common gotchas first in the FAQ.
• Supported components: The following is a list of Material Design components & features.
• Supported platforms: Learn about the platforms, from modern to old, that are supported by Material UI.
• Support: Learn how to get support for Material UI components, including feature requests, bug fixes, and technical support from the team.

Customization

• Overriding component structure: Learn how to override the default DOM structure of Material UI components.
• Dark mode: Material UI comes with two palette modes: light (the default) and dark.
• Color: Convey meaning through color. Out of the box you get access to all colors in the Material Design guidelines.
• Right-to-left support: Learn how to implement right-to-left (RTL) text with Material UI to support languages such as Arabic, Persian, and Hebrew.
• Shadow DOM: The shadow DOM lets you encapsulate parts of an app to keep them separate from global styles that target the regular DOM tree.
• Default theme viewer: This tree view allows you to explore how the theme object looks like with the default values.
• Theming: Customize Material UI with your theme. You can change the colors, the typography and much more.
• Creating themed components: Learn how to create fully custom components that accept your app's theme.
• Themed components: You can customize a component's styles, default props, and more by using its component key inside the theme.
• Palette: The palette enables you to modify the color of the components to suit your brand.
• Typography: The theme provides a set of type sizes that work well together, and also with the layout grid.
• Spacing: Use the theme.spacing() helper to create consistent spacing between the elements of your UI.
• Shape: The shape is a design token that helps control the border radius of components.
• Breakpoints: API that enables the use of breakpoints in a wide variety of contexts.
• Container queries: Material UI provides a utility function for creating CSS container queries based on theme breakpoints.
• Density: How to apply density to Material UI components.
• z-index: z-index is the CSS property that helps control layout by providing a third axis to arrange content.
• Transitions: These theme helpers allow you to create custom CSS transitions, you can customize the durations, easings and more.
• CSS Layers: Learn how to generate Material UI styles with cascade layers.

Guides

• Building extensible themes: Learn how to build extensible themes with Material UI.
• Minimizing bundle size: Learn how to reduce your bundle size and improve development performance by avoiding costly import patterns.
• Server rendering: The most common use case for server-side rendering is to handle the initial render when a user (or search engine crawler) first requests your app.
• Responsive UI: Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.
• Testing: Write tests to prevent regressions and write better code.
• Localization: Localization (also referred to as "l10n") is the process of adapting a product or content to a specific locale or market.
• API design approach: We have learned a great deal regarding how Material UI is used, and the v1 rewrite allowed us to completely rethink the component API.
• TypeScript: You can add static typing to JavaScript to improve developer productivity and code quality, thanks to TypeScript.
• Composition: Material UI tries to make composition as easy as possible.
• Content Security Policy (CSP): This section covers the details of setting up a CSP.

Integrations

• Next.js integration: Learn how to use Material UI with Next.js.
• Routing libraries: By default, the navigation is performed with a native <a> element. You can customize it, for instance, using Next.js's Link or react-router.
• Using styled-components: Learn how to use styled-components instead of Emotion with Material UI.
• Style library interoperability: While you can use the Emotion-based styling solution provided by Material UI, you can also use the one you already know, from plain CSS to styled-components.
• Theme scoping: Learn how to use multiple styling solutions in a single Material UI app.

Migration

• Upgrade to Grid v2: This guide explains how and why to migrate from the GridLegacy component to the Grid component.
• Migration from @material-ui/pickers:

  @material-ui/pickers was moved to the @mui/lab.

• Upgrade to v7: This guide explains how to upgrade from Material UI v6 to v7.
• Upgrade to v6: This guide explains why and how to upgrade from Material UI v5 to v6.
• Migrating from deprecated APIs: Learn how to migrate away from recently deprecated APIs before they become breaking changes.
• Migrating to v5: getting started: This guide explains how and why to migrate from Material UI v4 to v5.
• Migration from v3 to v4: Yeah, v4 has been released!
• Migration from v0.x to v1: Yeah, v1 has been released! Take advantage of 2 years worth of effort.