Material UI Documentation

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

You may "fetch" the URL provided to read more for item that you interested.

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.
• 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.
• 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.

Experimental API

• ClassName generator: Configure classname generation at build time.
• Getting started with Pigment CSS: Learn how to get started customizing your components using Pigment CSS.

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 native color: This guide explains how to upgrade from JavaScript color manipulation to native color.
• Migrating to Pigment CSS: This guide helps you integrate Pigment CSS with Material UI.
• Migrating from deprecated APIs: Learn how to migrate away from recently deprecated APIs before they become breaking changes.
• Migrating from JSS (optional): This guide explains how to migrate from JSS to Emotion when updating 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.