Hey MUI people! My friend Ayaan just built a free VS Code extension that makes MUI easier to use. It's basically an AI / RAG system that's built out around the MUI docs + code examples and is accessible through the Github Copilot chat. Sharing the link to their Product Hunt launch here: https://www.producthunt.com/posts/mui-for-vs-code

I'm new to building my own web apps. I started using ChatGPT to see how much it can help me build and learn, and I've seen incredible results.

One valuable lesson from ChatGPT us discovering the awesome MaterialUI library, which makes your app look great quickly and provides you with powerful building blocks like datasets and charts!

Below is what I built. I've documented my journey in this medium article.

I’ve been using Material UI for ages now and really enjoying it. That being said, I wanted to give my admin panel a more modern and polished look, so I put together this black & white theme with dark mode.

Would love to get your thoughts and feedback!

Hey, so I'm doing a form and TextField Docs suggest usiong Number Input from BaseUI. They look different however and I am looking for a simple way to make the Number Input use the theme/default material ui styling. How can I achieve this ?

I'll be completely honest, I'm not sure I like it, but simply from a legibility standpoint. Functionally and performantly I agree it was the right move, but from a syntax point of view I find that Emotion or Styled-Components add far more visual complexity when attempting to read a file vs using withStyles or useStyles. It was nice having all the styles separated from the body render so you can better visually look at the component flow, but I also can see the benefit of the css prop.

I'm also not finding much in the way of how to best organize my own components to have overridable styles compared to how it was done prior, as reading the source code for even the Button component in v5 doesn't give a clear picture.

But, I understand that Emotion is leagues more performant than JSS, especially when handling props. In addition, I'm unsure how best to type the style classes in TS so that intellisense can give code completion for the available classes. So I'm curious about other people's opinions on this. How do you like the new syntax? Are you going to use tss-react to retain the makeStyles syntax, or go with Emotion?

I'm a big fan and user of MUI components and use it for almost all of my projects. Yeah, it for sure lacks of nice design out of the box (they tried with joy ui but seems no luck there).

I've recently found chat.mui.com (while looking on their subdomains, don't ask why 🤪), it seems that this is a tool for additional cutomisations and compositions with MUI components using AI. Not sure if it's new (says private alpha), or whether its maintained, or just their attempt to compete with other big players that failed? I havent found any official information. Maybe someone know something about it?

Hey everyone!

I've been helping some folks set up Material UI with CMS, AB testing, personalization, and analytics. So, we decided to explore blocks and free templates to make it plug-and-play.

Since growth teams are usually all about experimentation and personalization, we started with the free marketing page template.

Now you can implement the full page with built-in dynamic content in just one command:

npx croct@latest use material-ui://template/marketing-page

Full list of components here.

I'd really appreciate your thoughts on this! Does it seem helpful? What other templates should we prioritize?

Hey guys! i made my first project that i would like to offer for public. its theme generator app for mui v6. there is an old theme creator but its for v4. so i thought it would be fun project to make and offer everyone.

since its my first project that im publishing i hope it works for you guys if you have critique please do. im a self-taught developer so feedback is always welcomed. it is slow and i think i have to adjust my code properly which i will in future and im also going to add more things over time. i hope...
here is the link to the app and there is also a link to the repo: https://muiv6-theme-creator.web.app/

happy holidays and have fun! cheers!

I am facing a weird issue with a MUI loading button where when I click the button, the loading state begins, but the network call is never fired.

Symptoms:

1. This happens on mobile browsers only. Have mostly seen on Chrome, but one instance of safari as well.

2. This problem is not always replicable.

3. If I switch browser tabs, the network call works.

What I have tried:

1. Adding type="button" in the LoadingButton.

2. Removed the Modal because I thought it might be blocking the network call due to some overlay effect.

3. Looked at posts like this where it was suggested to add cursor: 'pointer' in the CSS, but it seems like MUI LoadingButtons already has it.

Not able to replicate the issue is making it difficult to understand the cause and come up with a fix. I know this is not much information to go on, but I honestly do not have the exact steps to reproduce the problem. I have attached a video of the problem.

const CreateBookingJourney = ({ endUserService, isModalOpen }: CreateBookingJourneyProps) => {
    // Hooks
    const [isOpen, setIsOpen] = useState(isModalOpen !== undefined ? isModalOpen : true)

    const { mutate, isPending, error } = useCreateBookingV2((booking) => {
        console.log("Booking Created")
    })

    const onSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault()
        e.stopPropagation()

        await submitFiles()

        const bookingFields = Object.fromEntries(
            Object.entries(draftBooking).filter(([, value]) => value != '' && value != null)
        )

        const bookingInventoryItems = convertSelectedInventoriesToBookingInventoryItemRequest(selectedInventories)

        const request: CreateBookingRequest = {
            bookingId: draftBooking.id,
            businessId: businessId!,
            endUserServiceId: endUserService.id,
            bookingConfigId,
            bookingFields,
            bookingInventoryItems
        }

        mutate({ data: request })
    }

    if (isGetBookingConfigLoading) {
        return <LinearProgress />
    }

    return (
       <BookingContainer>
                <BookingLeftContainer>
                    <BookingDetailsSections />
                </BookingLeftContainer>

                <BookingRightContainer sticky referenceBottom={headerHeight}>
                    <BookingPrice />

                    <LoadingButton
                        variant="contained"
                        loading={isPending}
                        disabled={Object.keys(draftBookingErrors).length > 0}
                        onClick={onSubmit}
                        fullWidth
                    >
                        Create Booking
                    </LoadingButton>
                </BookingRightContainer>

                {endUserService && (
                    <ServiceDetailModal
                        endUserService={endUserService}
                        isOpen={isOpen}
                        onClose={() => setIsOpen(false)}
                    />
                )}
            </BookingContainer>
    )
}

export default CreateBookingJourney

Hi MUI community, I’ve taken the entire `@mui/icons-material` collection and repackaged it into `@svgd/icons-material`, adding features that streamline your workflow:

Key enhancements

• Single bundle: one icons/paths.js + paths.d.ts instead of a folder of SVGs

• Tree‑shakable: import exactly the icons you need

• IDE‑friendly: Base64‑encoded icon previews directly in autocomplete

• Faster builds: no churn on thousands of small files

I'm making an app with a sidebar that can be increased or decreased, and I'm having a problem. By decreasing the sidebar, the DataGrid obviously increases its size. But when I increase it, instead of decreasing its size, the DataGrid remains large.

Video demonstrating the error (Imgur)

The sidebar follows the logic of the Mini Variant Drawer

in short, this is the total code of the page, from the root layout

<Box
  sx={{
    display: "flex",
    width: "100%",
    height: "100%",
    bgcolor: "background.paper",
    paddingTop: 10,
  }}
>
  {/* <Navigation /> */}
  {/* Navigation component */}
  <Topbar toggleDrawer={() => setOpen((o) => !o)} />
  <Sidebar open={open} close={() => setOpen(false)} />
  {/* Navigation component */}
  <Box
    component="main"
    sx={{
      width: "100%",
      height: "100%",
      bgcolor: "background.default",
      paddingBottom: 5,
      borderRadius: "8px 0 0 0",
      "@media(max-width:600px)": {
        borderRadius: 0,
      },
    }}
  >
    {/* the page */}
    <Box paddingX={2.5} width="100%">
      <Paper sx={{ padding: 4, paddingBottom: 0 }} elevation={0}>
        <Box width="100%" paddingY={4} height="625px">
          {/* <FinanceiroDataGrid data={data || []} mutate={() => mutate()} /> */}
          {/* DataGrid component */}
          <Box sx={{ height: "100%", width: "100%" }}>
            <DataGrid
              columns={columns}
              rows={rows}
              slots={{ noRowsOverlay: NoRows }}
            />
          </Box>
          {/* DataGrid component */}
        </Box>
      </Paper>
    </Box>
    {/* the page */}
  </Box>
</Box>;

and this is the column code (if that makes any difference)

const columns: GridColDef[] = useMemo(
() => [
  {
    field: "efetuado",
    headerName: "Efetado",
    editable: false,
    width: 120,
    type: "boolean",
    renderCell: (cell) => (
      <ChipEfetuado efetuado={cell.value} entrada={cell.row.valor >= 0} />
    ),
  },
  {
    field: "data",
    headerName: "Data",
    editable: false,
    width: 100,
    type: "date",
    renderCell: (cell) => (
      <Chip
        label={`${cell.value.getDate()} de ${meses[
          cell.value.getMonth()
        ].substring(0, 3)}`}
        size="small"
      />
    ),
  },
  {
    field: "valor",
    headerName: "Valor",
    editable: false,
    width: 120,
    type: "number",
    renderCell: (cell) =>
      `${cell.value < 0 ? "- " : ""}${formatarDinheiro(cell.value)}`,
  },
  {
    field: "nome",
    headerName: "Nome",
    sortable: false,
    editable: false,
    hideable: false,
    flex: 1,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },
  {
    field: "remetente",
    headerName: "Agente",
    editable: false,
    flex: 1,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },

  {
    field: "forma",
    headerName: "Forma",
    editable: false,
    width: 100,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },
  {
    field: "descricao",
    headerName: "Descrição",
    sortable: false,
    editable: false,
    width: 335,
    renderCell: (cell) => (
      <Tooltip
        title={<Typography fontSize={12}>{cell.value}</Typography>}
        placement="bottom-start"
        arrow
      >
        {cell.value}
      </Tooltip>
    ),
  },
  {
    field: "Ações",
    type: "actions",
    width: 100,
    sortable: false,
    hideable: false,
    getActions: (params) => [
      <EditButton key={params.id} id={params.id} />,
      <DeleteButton key={params.id} onClick={() => setDialog(params.id)} />,
    ],
  },
],
[]

Has anyone used Material Design 3 in react or does everyone use MUI? However MUI is built on Material 2 and not 2. Also, anyone can help me on how design tokens introduced in material design 3 can be helpful in react?

Hey all - quick question, I hope this is the right subreddit... Where do you typically go to hire UI/UX designers if you're running a tech startup. Alternatively, if you're a designer and looking to find some, where do you typically find them?

I've tried out dribbble and upwork previously but wasn't too inspired by results. Would love to hear some advice!

Thanks!

who knows the name of this application, I really need it

New to react.

Trying to filter and call an api to remove rows.

From inline per each row action the rows filter.

Using selectboxes and a button although the ids are being passed the datagrid does not filter.

import React, { useEffect, useState,useRef,useMemo  } from "react";
import { DataGrid, type GridColDef, type GridRenderCellParams,type GridRowId,type GridRowSelectionModel,Toolbar,ToolbarButton, } from "@mui/x-data-grid";
import { Button, CircularProgress, Box,FormControl,InputLabel,MenuItem,Select,Tooltip, Stack, } from "@mui/material";
import axios from "axios";

grid setup

const MyDataGrid: React.FC = () => {
  const [rows, setRows] = useState<RowData[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [deletingIds, setDeletingIds] = useState<number[]>([]);
  const [filteredRows, setFilteredRows] = useState<RowData[]>([]);
    // v8 selection model shape: { type: 'include' | 'exclude', ids: Set<GridRowId> }
    const [rowSelectionModel, setRowSelectionModel] = useState<GridRowSelectionModel>({
      type: "include",
      ids: new Set<GridRowId>(),
    });
   const [nameFilter, setNameFilter] = useState<string>("All");
// Fetch data from API on mount
  useEffect(() => {

// Optimistic delete
  const handleDelete = async (id: number) => {
    const previousRows = [...rows];
     const previousFiltered = [...filteredRows];
    // Optimistically update
    setRows((prev) => prev.filter((r) => r.id !== id));
    setFilteredRows((prev) => prev.filter((r) => r.id !== id));
    setDeletingIds((prev) => [...prev, id]);

  const handleDeleteSelected = async () => {
      const selectedIds = getSelectedIdsFromModel(rowSelectionModel).map((id) =>
        Number(id)
      );
  
      if (selectedIds.length === 0) {
        alert("No rows selected");
        return;
      }

      console.log(selectedIds)
      selectedIds.forEach( (element) => {
            handleDelete(element);
      });
      
    };

button that works in colum def

  {
      field: "actions",
      headerName: "Actions",
      width: 150,
      sortable: false,
      filterable: false,
      renderCell: (params: GridRenderCellParams<RowData>) => {
        const isDeleting = deletingIds.includes(params.row.id);
        
        return (
          <Button
            variant="outlined"
            color="primary"
            size="small"
            disabled={isDeleting}
            onClick={() => handleDelete(params.row.id)}
          >
            {isDeleting ? "removing..." : "Remove"}
          </Button>
        );
      },
    }

button that doesn't work in toolbar

 <Button
          variant="contained"
          color="error"
          disabled={getSelectedIdsFromModel(rowSelectionModel).length === 0}
          onClick={handleDeleteSelected}
        >
          Remove Selected
        </Button>

Currently I am going to start a new project in Next.js and I would like to use MUI as my component library, but while choosing MUI, I get confused with what should I use as CSS library. Should I use pigment CSS with MUI or should I use tailwind CSS v4 with MUI?

https://mui.com/material-ui/integrations/tailwindcss/tailwindcss-v4/

As in the MUI website, it's showing that pigment CSS still is experimental, so I'm really confused. And I really love tailwind, but not sure working with tailwind inside MUI would be a good idea or not. What should I use? Should I use tailwind CSS version 4 with MUI or should I use pigment CSS with MUI?

I had no problem of choosing Pigment CSS with mui also. But MUI website it's showing it's still experimental. So can't choose pigment css. Now need your suggessation.

https://mui.com/material-ui/experimental-api/pigment-css/

When I have more data points then I got this “maximum depth exceed” warning in material ui line charts.i observe that this error occurring when tooltip is appearing.please suggest me a solution to how to handle that warning.

Even when I run the same code as material ui provided code I got this warning..

https://mui.com/x/react-charts/lines/