# Mui Llms

> Material UI documentation and resources. Use this skill when working with Material UI or when the user mentions material ui.

- Skill: `hk-vk/mui-llms` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add hk-vk/mui-llms`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hk-vk/mui-llms/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Docs & Writing
- Author: hk-vk (https://skillmd.com/u/hk-vk)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/hk-vk/mui-llms

---


# Material UI

## Available Resources

### Components

- **App Bar React component**: The App Bar displays information and actions relating to the current screen.
  - URL: https://mui.com/material-ui/react-app-bar.md

- **Backdrop React Component**: The Backdrop component narrows the user's focus to a particular element on the screen.
  - URL: https://mui.com/material-ui/react-backdrop.md

- **Bottom Navigation React component**: The Bottom Navigation bar allows movement between primary destinations in an app.
  - URL: https://mui.com/material-ui/react-bottom-navigation.md

- **Circular, Linear progress React components**: Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process.
  - URL: https://mui.com/material-ui/react-progress.md

- **CSS Baseline**: The CssBaseline component helps to kickstart an elegant, consistent, and simple baseline to build upon.
  - URL: https://mui.com/material-ui/react-css-baseline.md

- **Detect click outside React component**: The Click-Away Listener component detects when a click event happens outside of its child element.
  - URL: https://mui.com/material-ui/react-click-away-listener.md

- **How to customize**: Learn how to customize Material UI components by taking advantage of different strategies for specific use cases.
  - URL: https://mui.com/material-ui/customization/how-to-customize.md

- **Image List React component**: The Image List displays a collection of images in an organized grid.
  - URL: https://mui.com/material-ui/react-image-list.md

- **InitColorSchemeScript component**: The InitColorSchemeScript component eliminates dark mode flickering in server-side-rendered applications.
  - URL: https://mui.com/material-ui/react-init-color-scheme-script.md

- **Links**: The Link component allows you to easily customize anchor elements with your theme colors and typography styles.
  - URL: https://mui.com/material-ui/react-link.md

- **No SSR React component**: The No-SSR component defers the rendering of children components from the server to the client.
  - URL: https://mui.com/material-ui/react-no-ssr.md

- **Number field React component**: A React component for capturing numeric input from users.
  - URL: https://mui.com/material-ui/react-number-field.md

- **React Accordion component**: The Accordion component lets users show and hide sections of related content on a page.
  - URL: https://mui.com/material-ui/react-accordion.md

- **React Alert component**: Alerts display brief messages for the user without interrupting their use of the app.
  - URL: https://mui.com/material-ui/react-alert.md

- **React Autocomplete component**: The autocomplete is a normal text input enhanced by a panel of suggested options.
  - URL: https://mui.com/material-ui/react-autocomplete.md

- **React Avatar component**: Avatars are found throughout material design with uses in everything from tables to dialog menus.
  - URL: https://mui.com/material-ui/react-avatar.md

- **React Badge component**: Badge generates a small badge to the top-right of its child(ren).
  - URL: https://mui.com/material-ui/react-badge.md

- **React Box**: The Box component is a generic, theme-aware container with access to CSS utilities from MUI System.
  - URL: https://mui.com/material-ui/react-box.md

- **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.
  - URL: https://mui.com/material-ui/react-breadcrumbs.md

- **React Button component**: Buttons allow users to take actions, and make choices, with a single tap.
  - URL: https://mui.com/material-ui/react-button.md

- **React Button Group component**: The ButtonGroup component can be used to group related buttons.
  - URL: https://mui.com/material-ui/react-button-group.md

- **React Card component**: Cards contain content and actions about a single subject.
  - URL: https://mui.com/material-ui/react-card.md

- **React Checkbox component**: Checkboxes allow the user to select one or more items from a set.
  - URL: https://mui.com/material-ui/react-checkbox.md

- **React Chip component**: Chips are compact elements that represent an input, attribute, or action.
  - URL: https://mui.com/material-ui/react-chip.md

- **React Container component**: The container centers your content horizontally. It's the most basic layout element.
  - URL: https://mui.com/material-ui/react-container.md

- **React Dialog component**: Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
  - URL: https://mui.com/material-ui/react-dialog.md

- **React Divider component**: The Divider component provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy.
  - URL: https://mui.com/material-ui/react-divider.md

- **React Drawer component**: The navigation drawers (or "sidebars") provide ergonomic access to destinations in a site or app functionality such as switching accounts.
  - URL: https://mui.com/material-ui/react-drawer.md

- **React Floating Action Button (FAB) component**: A Floating Action Button (FAB) performs the primary, or most common, action on a screen.
  - URL: https://mui.com/material-ui/react-floating-action-button.md

- **React Grid component**: The responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
  - URL: https://mui.com/material-ui/react-grid.md

- **React Icon Component**: Guidance and suggestions for using icons with Material UI.
  - URL: https://mui.com/material-ui/icons.md

- **React List component**: Lists are continuous, vertical indexes of text or images.
  - URL: https://mui.com/material-ui/react-list.md

- **React Masonry component**: Masonry lays out contents of varying dimensions as blocks of the same width and different height with configurable gaps.
  - URL: https://mui.com/material-ui/react-masonry.md

- **React Menu component**: Menus display a list of choices on temporary surfaces.
  - URL: https://mui.com/material-ui/react-menu.md

- **React Modal component**: The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
  - URL: https://mui.com/material-ui/react-modal.md

- **React Pagination component**: The Pagination component enables the user to select a specific page from a range of pages.
  - URL: https://mui.com/material-ui/react-pagination.md

- **React Paper component**: The Paper component is a container for displaying content on an elevated surface.
  - URL: https://mui.com/material-ui/react-paper.md

- **React Popover component**: A Popover can be used to display some content on top of another.
  - URL: https://mui.com/material-ui/react-popover.md

- **React Popper component**: A Popper can be used to display some content on top of another. It's an alternative to react-popper.
  - URL: https://mui.com/material-ui/react-popper.md

- **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.
  - URL: https://mui.com/material-ui/react-portal.md

- **React Radio Group component**: The Radio Group allows the user to select one option from a set.
  - URL: https://mui.com/material-ui/react-radio-button.md

- **React Rating component**: Ratings provide insight regarding others' opinions and experiences, and can allow the user to submit a rating of their own.
  - URL: https://mui.com/material-ui/react-rating.md

- **React Select component**: Select components are used for collecting user provided information from a list of options.
  - URL: https://mui.com/material-ui/react-select.md

- **React Skeleton component**: Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
  - URL: https://mui.com/material-ui/react-skeleton.md

- **React Slider component**: Sliders allow users to make selections from a range of values.
  - URL: https://mui.com/material-ui/react-slider.md

- **React Snackbar component**: Snackbars (also known as toasts) are used for brief notifications of processes that have been or will be performed.
  - URL: https://mui.com/material-ui/react-snackbar.md

- **React Speed Dial component**: When pressed, a floating action button can display three to six related actions in the form of a Speed Dial.
  - URL: https://mui.com/material-ui/react-speed-dial.md

- **React Stack component**: Stack is a container component for arranging elements vertically or horizontally.
  - URL: https://mui.com/material-ui/react-stack.md

- **React Stepper component**: Steppers convey progress through numbered steps. It provides a wizard-like workflow.
  - URL: https://mui.com/material-ui/react-stepper.md

- **React Switch component**: Switches toggle the state of a single setting on or off.
  - URL: https://mui.com/material-ui/react-switch.md

- **React Table component**: Tables display sets of data. They can be fully customized.
  - URL: https://mui.com/material-ui/react-table.md

- **React Tabs component**: Tabs make it easy to explore and switch between different views.
  - URL: https://mui.com/material-ui/react-tabs.md

- **React Text Field component**: Text Fields let users enter and edit text.
  - URL: https://mui.com/material-ui/react-text-field.md

- **React Timeline component**: The timeline displays a list of events in chronological order.
  - URL: https://mui.com/material-ui/react-timeline.md

- **React Tooltip component**: Tooltips display informative text when users hover over, focus on, or tap an element.
  - URL: https://mui.com/material-ui/react-tooltip.md

- **React transitions**: Transitions help to make a UI expressive and easy to use.
  - URL: https://mui.com/material-ui/transitions.md

- **React Typography component**: Use typography to present your design and content as clearly and efficiently as possible.
  - URL: https://mui.com/material-ui/react-typography.md

- **Textarea Autosize React component**: The Textarea Autosize component automatically adjusts its height to match the length of the content within.
  - URL: https://mui.com/material-ui/react-textarea-autosize.md

- **Toggle Button React component**: A Toggle Button can be used to group related options.
  - URL: https://mui.com/material-ui/react-toggle-button.md

### Design Resources

- **Material UI for Figma**: Enhance designer-developer collaboration between Material UI and Figma.
  - URL: https://mui.com/material-ui/design-resources/material-ui-for-figma.md

- **Material UI Sync plugin 🧪**: Sync is a Figma plugin that generates Material UI themes directly from design to code.
  - URL: https://mui.com/material-ui/design-resources/material-ui-sync.md

### Discover More

- **Showcase**: Check out these public apps using Material UI to get inspired for your next project.
  - URL: https://mui.com/material-ui/discover-more/showcase.md

- **Related projects**: A carefully curated list of tools that expand or build on top of Material UI.
  - URL: https://mui.com/material-ui/discover-more/related-projects.md

- **Roadmap**: Keep up with ongoing projects and help shape the future of Material UI.
  - URL: https://mui.com/material-ui/discover-more/roadmap.md

- **Sponsors and Backers**: Support the development of the open-source projects of the MUI organization through crowdfunding.
  - URL: https://mui.com/material-ui/discover-more/backers.md

- **Vision**: Our vision is to provide an elegant React implementation of the Material Design guidelines that can be customized to fully match your brand.
  - URL: https://mui.com/material-ui/discover-more/vision.md

- **Changelog**: Material UI follows Semantic Versioning 2.0.0.
  - URL: https://mui.com/material-ui/discover-more/changelog.md

### Material UI

- **Material UI components**: Every Material UI component available so far.
  - URL: https://mui.com/material-ui/all-components.md

- **Transfer list React component**: A Transfer List (or "shuttle") enables the user to move one or more list items between lists.
  - URL: https://mui.com/material-ui/react-transfer-list.md

- **Menubar React component**: A React component for building accessible application menus.
  - URL: https://mui.com/material-ui/react-menubar.md

- **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.
  - URL: https://mui.com/material-ui/react-use-media-query.md

### Getting Started

- **Installation**: Install Material UI, the world's most popular React UI framework.
  - URL: https://mui.com/material-ui/getting-started/installation.md

- **Usage**: Learn the basics of working with Material UI components.
  - URL: https://mui.com/material-ui/getting-started/usage.md

- **Model Context Protocol (MCP) for MUI**: Access the official Material UI docs and code examples in your AI client.
  - URL: https://mui.com/material-ui/getting-started/mcp.md

- **Example projects**: A collection of examples and scaffolds integrating Material UI with popular libraries and frameworks.
  - URL: https://mui.com/material-ui/getting-started/example-projects.md

- **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.
  - URL: https://mui.com/material-ui/getting-started/templates.md

- **Learning resources**: New to Material UI? Get up to speed quickly with our curated list of learning resources.
  - URL: https://mui.com/material-ui/getting-started/learn.md

- **Design resources**: Be more efficient designing and developing with the same library.
  - URL: https://mui.com/material-ui/getting-started/design-resources.md

- **Frequently Asked Questions**: Stuck on a particular problem? Check some of these common gotchas first in the FAQ.
  - URL: https://mui.com/material-ui/getting-started/faq.md

- **Supported components**: The following is a list of Material Design components & features.
  - URL: https://mui.com/material-ui/getting-started/supported-components.md

- **Supported platforms**: Learn about the platforms, from modern to old, that are supported by Material UI.
  - URL: https://mui.com/material-ui/getting-started/supported-platforms.md

- **Support**: Learn how to get support for Material UI components, including feature requests, bug fixes, and technical support from the team.
  - URL: https://mui.com/material-ui/getting-started/support.md

- **Material UI Versions**: You can come back to this page and switch the version of the docs you're reading at any time.
  - URL: https://mui.com/material-ui/getting-started/versions.md

### Customization

- **Overriding component structure**: Learn how to override the default DOM structure of Material UI components.
  - URL: https://mui.com/material-ui/customization/overriding-component-structure.md

- **Dark mode**: Material UI comes with two palette modes: light (the default) and dark.
  - URL: https://mui.com/material-ui/customization/dark-mode.md

- **Color**: Convey meaning through color. Out of the box you get access to all colors in the Material Design guidelines.
  - URL: https://mui.com/material-ui/customization/color.md

- **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.
  - URL: https://mui.com/material-ui/customization/right-to-left.md

- **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.
  - URL: https://mui.com/material-ui/customization/shadow-dom.md

- **Default theme viewer**: This tree view allows you to explore how the theme object looks like with the default values.
  - URL: https://mui.com/material-ui/customization/default-theme.md

- **Theming**: Customize Material UI with your theme. You can change the colors, the typography and much more.
  - URL: https://mui.com/material-ui/customization/theming.md

- **Creating themed components**: Learn how to create fully custom components that accept your app's theme.
  - URL: https://mui.com/material-ui/customization/creating-themed-components.md

- **Themed components**: You can customize a component's styles, default props, and more by using its component key inside the theme.
  - URL: https://mui.com/material-ui/customization/theme-components.md

- **Palette**: The palette enables you to modify the color of the components to suit your brand.
  - URL: https://mui.com/material-ui/customization/palette.md

- **Typography**: The theme provides a set of type sizes that work well together, and also with the layout grid.
  - URL: https://mui.com/material-ui/customization/typography.md

- **Spacing**: Use the theme.spacing() helper to create consistent spacing between the elements of your UI.
  - URL: https://mui.com/material-ui/customization/spacing.md

- **Shape**: The shape is a design token that helps control the border radius of components.
  - URL: https://mui.com/material-ui/customization/shape.md

- **Breakpoints**: API that enables the use of breakpoints in a wide variety of contexts.
  - URL: https://mui.com/material-ui/customization/breakpoints.md

- **Container queries**: Material UI provides a utility function for creating CSS container queries based on theme breakpoints.
  - URL: https://mui.com/material-ui/customization/container-queries.md

- **Density**: How to apply density to Material UI components.
  - URL: https://mui.com/material-ui/customization/density.md

- **z-index**: z-index is the CSS property that helps control layout by providing a third axis to arrange content.
  - URL: https://mui.com/material-ui/customization/z-index.md

- **Transitions**: These theme helpers allow you to create custom CSS transitions, and you can customize the durations, easings, and more.
  - URL: https://mui.com/material-ui/customization/transitions.md

- **CSS Layers**: Learn how to generate Material UI styles with cascade layers.
  - URL: https://mui.com/material-ui/customization/css-layers.md

### Guides

- **Building extensible themes**: Learn how to build extensible themes with Material UI.
  - URL: https://mui.com/material-ui/guides/building-extensible-themes.md

- **Minimizing bundle size**: Learn how to reduce your bundle size and improve development performance by avoiding costly import patterns.
  - URL: https://mui.com/material-ui/guides/minimizing-bundle-size.md

- **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.
  - URL: https://mui.com/material-ui/guides/server-rendering.md

- **Responsive UI**: Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.
  - URL: https://mui.com/material-ui/guides/responsive-ui.md

- **Testing**: Write tests to prevent regressions and write better code.
  - URL: https://mui.com/material-ui/guides/testing.md

- **Localization**: Localization (also referred to as "l10n") is the process of adapting a product or content to a specific locale or market.
  - URL: https://mui.com/material-ui/guides/localization.md

- **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.
  - URL: https://mui.com/material-ui/guides/api.md

- **TypeScript**: You can add static typing to JavaScript to improve developer productivity and code quality, thanks to TypeScript.
  - URL: https://mui.com/material-ui/guides/typescript.md

- **Composition**: Material UI tries to make composition as easy as possible.
  - URL: https://mui.com/material-ui/guides/composition.md

- **Content Security Policy (CSP)**: This section covers the details of setting up a CSP.
  - URL: https://mui.com/material-ui/guides/content-security-policy.md

### Integrations

- **Next.js integration**: Learn how to use Material UI with Next.js.
  - URL: https://mui.com/material-ui/integrations/nextjs.md

- **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.
  - URL: https://mui.com/material-ui/integrations/routing.md

- **Using styled-components**: Learn how to use styled-components instead of Emotion with Material UI.
  - URL: https://mui.com/material-ui/integrations/styled-components.md

- **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.
  - URL: https://mui.com/material-ui/integrations/interoperability.md

- **Theme scoping**: Learn how to use multiple styling solutions in a single Material UI app.
  - URL: https://mui.com/material-ui/integrations/theme-scoping.md

### Migration

- **Upgrade to Grid v2**: This guide explains how and why to migrate from the GridLegacy component to the Grid component.
  - URL: https://mui.com/material-ui/migration/upgrade-to-grid-v2.md

- **Migration from @material-ui/pickers**: <p class="description"><code>@material-ui/pickers</code> was moved to the <code>@mui/lab</code>.</p>
  - URL: https://mui.com/material-ui/migration/pickers-migration.md

- **Upgrade to v9**: This guide explains how to upgrade from Material UI v7 to v9.
  - URL: https://mui.com/material-ui/migration/upgrade-to-v9.md

- **Upgrade to v7**: This guide explains how to upgrade from Material UI v6 to v7.
  - URL: https://mui.com/material-ui/migration/upgrade-to-v7.md

- **Upgrade to v6**: This guide explains why and how to upgrade from Material UI v5 to v6.
  - URL: https://mui.com/material-ui/migration/upgrade-to-v6.md

- **Migrating from deprecated APIs**: Learn how to migrate away from recently deprecated APIs before they become breaking changes.
  - URL: https://mui.com/material-ui/migration/migrating-from-deprecated-apis.md

- **Migrating to v5: getting started**: This guide explains how and why to migrate from Material UI v4 to v5.
  - URL: https://mui.com/material-ui/migration/migration-v4.md

- **Migration from v3 to v4**: Yeah, v4 has been released!
  - URL: https://mui.com/material-ui/migration/migration-v3.md

- **Migration from v0.x to v1**: Yeah, v1 has been released! Take advantage of 2 years worth of effort.
  - URL: https://mui.com/material-ui/migration/migration-v0x.md

## How to Use This Skill

Reference these resources when working with Material UI.