The Definitive MUI MenuButton and Menu Example (With TypeScript!)

Menu buttons are common components in web development. Interestingly, MUI doesn’t currently offer an out-of-the-box MenuButton component. However, they do have a compositional component in the docs that we will massively customize in this tutorial. We will add a dynamic icon to the button that rotates based on Menu open state. Then we will explore … Read more

The Ultimate Material-UI Select Component Tutorial (With TypeScript!)

MUI Select Tutorial with TypeScript

The MUI Select component is an input/dropdown combo that comes with dozens of configurable props. In this tutorial I will customize the dropdown position, the default and placeholder values, add multiselect, and add labels and helper text, and more. In most of my examples I dive deep into styling, but this tutorial is all about … Read more

The Essential MUI Tooltip Demo With Custom Position, Arrow, and Internal Components

The MUI Tooltip component has lots of customization options. This tutorial focuses on positioning, the anchor arrow, and how to render different components and images internally in the Tooltip. If you are looking for styling inside the Tooltip, this post shows many different examples of styling the Tooltip component. Here’s one of the examples we … Read more

The Ultimate Material-UI v5 DatePicker and TimePicker Tutorial (Plus Styling!)

The MUI DatePicker and TimePicker components are highly functional and customizable components. They satisfy many use cases for selecting date and time, for example in forms or filters. In this tutorial we will explore how to use the pickers plus some of the best features available in the components. After showing examples of several useful … Read more

How to Style the Material-UI Tooltip

The Material-UI Tooltip is an exceptionally well designed component. It has a number of props delivering great versatility for numerous use cases. However, styling the MUI Tooltip is still a manual process that requires a strong grasp of CSS. In this Tutorial I will demonstrate how to style the Tooltip in many ways, including width, … Read more

React MUI v5 Data Grid Tutorial: Sort, Filter, Export, Pagination and Cell Editing

The Material-UI Data Grid is easily the largest and most customizable component in the MUI library. It has more subcomponents and props than any other component. In this tutorial I will review common features of the Data Grid: sorting, filtering, exporting, pagination, and cell editing. I will also review the docs and some challenges I … Read more

The Essential Guide to the Material-UI Progress Bar: Color, Percent, and More

The MUI Progress Bar, more formally known as the MUI LinearProgress component, gives a user visual feedback while waiting for resources to load in a web page. In this tutorial I will customize the progress bar with dynamic color based on load value, a percent label, and both vertical and horizontal orientation. Here’s a screenshot … Read more

React MUI v5 Table Tutorial: TypeScript, Styling, and Component Cells

The Material-UI Table component is a great data visualization component with incredible customization options. However, sometimes we need a foundational guide for a component. This tutorial explores the subcomponents that compose a table, styling the table the MUI v5 way, TypeScript, and a few Table props. We will create the table pictured below. The random … Read more

Understanding MUI Labels: TextField Labels, Input Labels, and Form Labels

Material-UI labels provide visual information in a UI, but understanding the different label use cases can be challenging. For example, a TextField is composed of an InputLabel component plus other components. FormLabels are often used as part of a subcomponent in a form. In this article we will explore when to use each label and … Read more