@mui/material/docs/material-ui/index.md

Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.

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

## Design Resources

- [Material UI for Figma](./design-resources/material-ui-for-figma.md): Enhance designer-developer collaboration between Material UI and Figma.
- [Material UI Sync plugin 🧪](./design-resources/material-ui-sync.md): Sync is a Figma plugin that generates Material UI themes directly from design to code.

## Discover More

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

## Material UI

- [Material UI components](./all-components.md): Every Material UI component available so far.
- [Transfer list React component](./react-transfer-list.md): A Transfer List (or "shuttle") enables the user to move one or more list items between lists.
- [Menubar React component](./react-menubar.md): A React component for building accessible application menus.
- [Media queries in React for responsive design](./react-use-media-query.md): 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](./getting-started/installation.md): Install Material UI, the world's most popular React UI framework.
- [Usage](./getting-started/usage.md): Learn the basics of working with Material UI components.
- [Model Context Protocol (MCP) for MUI](./getting-started/mcp.md): Access the official Material UI docs and code examples in your AI client.
- [Example projects](./getting-started/example-projects.md): A collection of examples and scaffolds integrating Material UI with popular libraries and frameworks.
- [New Free React Templates](./getting-started/templates.md): 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](./getting-started/learn.md): New to Material UI? Get up to speed quickly with our curated list of learning resources.
- [Design resources](./getting-started/design-resources.md): Be more efficient designing and developing with the same library.
- [Frequently Asked Questions](./getting-started/faq.md): Stuck on a particular problem? Check some of these common gotchas first in the FAQ.
- [Accessibility conformance report](./getting-started/accessibility.md): How Material UI components conform to WCAG 2.2 Level A and AA, reported in VPAT terms for procurement and accessibility review.
- [Supported components](./getting-started/supported-components.md): The following is a list of Material Design components & features.
- [Supported platforms](./getting-started/supported-platforms.md): Learn about the platforms, from modern to old, that are supported by Material UI.
- [Support](./getting-started/support.md): Learn how to get support for Material UI components, including feature requests, bug fixes, and technical support from the team.
- [Material UI Versions](./getting-started/versions.md): You can come back to this page and switch the version of the docs you're reading at any time.

## Css Theme Variables

- [CSS theme variables](./customization/css-theme-variables/overview.md): An overview of adopting CSS theme variables in Material UI.
- [CSS theme variables - Usage](./customization/css-theme-variables/usage.md): Learn how to adopt CSS theme variables.
- [CSS theme variables - Native color](./customization/css-theme-variables/native-color.md): Learn how to use native color with CSS theme variables.
- [CSS theme variables - Configuration](./customization/css-theme-variables/configuration.md): A guide for configuring CSS theme variables in Material UI.

## Customization

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

## Guides

- [Building extensible themes](./guides/building-extensible-themes.md): Learn how to build extensible themes with Material UI.
- [Minimizing bundle size](./guides/minimizing-bundle-size.md): Learn how to reduce your bundle size and improve development performance by avoiding costly import patterns.
- [Server rendering](./guides/server-rendering.md): 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](./guides/responsive-ui.md): Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.
- [Testing](./guides/testing.md): Write tests to prevent regressions and write better code.
- [Localization](./guides/localization.md): Localization (also referred to as "l10n") is the process of adapting a product or content to a specific locale or market.
- [API design approach](./guides/api.md): 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](./guides/typescript.md): You can add static typing to JavaScript to improve developer productivity and code quality, thanks to TypeScript.
- [Composition](./guides/composition.md): Material UI tries to make composition as easy as possible.
- [Content Security Policy (CSP)](./guides/content-security-policy.md): This section covers the details of setting up a CSP.

## Integrations

- [Next.js integration](./integrations/nextjs.md): Learn how to use Material UI with Next.js.
- [Routing libraries](./integrations/routing.md): 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](./integrations/styled-components.md): Learn how to use styled-components instead of Emotion with Material UI.
- [Style library interoperability](./integrations/interoperability.md): 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](./integrations/theme-scoping.md): Learn how to use multiple styling solutions in a single Material UI app.

## Tailwindcss

- [Tailwind CSS v4 integration](./integrations/tailwindcss/tailwindcss-v4.md): Learn how to use Material UI with Tailwind CSS v4.

## Migration

- [Upgrade to Grid v2](./migration/upgrade-to-grid-v2.md): This guide explains how and why to migrate from the GridLegacy component to the Grid component.
- [Migration from @material-ui/pickers](./migration/pickers-migration.md): `<p class="description">``<code>`@material-ui/pickers`</code>` was moved to the `<code>`@mui/lab`</code>`.`</p>`
- [Upgrade to v9](./migration/upgrade-to-v9.md): This guide explains how to upgrade from Material UI v7 to v9.
- [Upgrade to v7](./migration/upgrade-to-v7.md): This guide explains how to upgrade from Material UI v6 to v7.
- [Upgrade to v6](./migration/upgrade-to-v6.md): This guide explains why and how to upgrade from Material UI v5 to v6.
- [Migrating from deprecated APIs](./migration/migrating-from-deprecated-apis.md): Learn how to migrate away from recently deprecated APIs before they become breaking changes.
- [Migrating to v5: getting started](./migration/migration-v4.md): This guide explains how and why to migrate from Material UI v4 to v5.
- [Migration from v3 to v4](./migration/migration-v3.md): Yeah, v4 has been released!
- [Migration from v0.x to v1](./migration/migration-v0x.md): Yeah, v1 has been released! Take advantage of 2 years worth of effort.