Material UI, and when to choose it
Reaching for a ready-made component library is the right call more often than people expect. A bespoke design system wins in a few specific situations, and the difference is a five-year cost rather than a matter of taste.
01Overview
A ready-made component set for React
Material UI (usually written MUI) is a component library for React. It implements Google's Material Design as ready-made, accessible components, with a theming layer for colour, typography, spacing and shape. Unstyled behaviour primitives and a commercially licensed advanced set sit beside it. It is React-only: Angular and Vue have their own.
02Capabilities
Where borrowing beats building
We reach for a library when the interface is not the product's differentiator, and we call it the practical choice it is rather than dressing it up as a strategy.
- Internal
Operations screens used all day
Admin panels, back-office and dispatch screens: the sort of interface twenty trained people use all day, rather than one a stranger judges in three seconds. In warehouse and logistics systems the useful work is data density, keyboard efficiency and error prevention, none of which needs bespoke buttons.
- Speed
Something real in front of users early
A working interface in weeks, instead of a design phase followed by a build phase. It also makes the honest conversation possible: once people are using it, you can see which parts deserve custom design work and which were always fine.
- Brand
Fitting an existing brand, within limits
Theming to your colour, type and spacing, so the result looks like your product rather than a Material Design demo. How far that goes before it stops being economical is the judgement call, and it is the one we get paid for.
03Fit
Six situations, and what each one should cost you
The library-versus-bespoke question is really about whether your interface is a differentiator or a cost, and it is expensive in both directions. Row one is the case the library was built for. Three rows name the page for that decision, and two name what to settle before you commit.
| Your situation | What we recommend |
|---|---|
| An internal or B2B tool, a small team, and no dedicated designer | Use Material UIIts strongest case. Spend the months you save on the data model and the workflows, which is what that product is actually judged on. |
| A consumer product where the interface is part of the brand | Different pageA bespoke design system, with product design ahead of it. Fighting a library's visual opinions costs more than owning your components from the start. |
| Your front end is Angular or Vue | Different pageIt does not exist for you. Angular has Angular Material and Vue has its own libraries, and the same decision rule applies to both. |
| Marketing pages and content, where page weight decides ranking | Different pagePlain CSS, or a light layer such as Bootstrap. Shipping a React component library to render a landing page is a poor trade. |
| You need a spreadsheet-grade data grid | Check firstRead the licence tier before you design the feature around it. The advanced grids are commercial, and finding that out after the screen is built is an avoidable surprise. |
| Your components are inconsistent and nobody has said why | Settle the rules firstSwapping libraries reprices the same disagreement. Settle naming, tokens and composition rules first, then choose, then catalogue the result in Storybook. |
Scope
What we own when we choose a library is the escape route. Your components sit behind a thin layer of your own naming, so replacing it later is a contained job rather than a rewrite. A major version upgrade becomes planned work rather than a surprise arriving with a security advisory. unicrew has been building product interfaces since 2012, with 100+ senior in-house engineers across six countries, under an ISO 27001:2022 certified information-security management system. Accessible components composed carelessly still make an inaccessible page, so we build to WCAG 2.2 AA either way.
04Stack
What ships alongside it
The five decisions that travel with this one, each with a page of its own.
05Questions
Questions from teams weighing the trade
Answered the way we would answer them live. If yours is not here, it is a good first message.
Ask who looks at the interface and for how long. If it is your own staff using it all day, the library wins and the argument ends quickly. If prospects decide in ten seconds whether your product feels credible, a design system of your own earns its cost. The expensive middle is a brand-led product on a heavily themed library, where you pay twice.
Up to a point, and the point arrives sooner than people expect. Colour, type, spacing, radius and elevation are straightforward. Component anatomy is not: how a Material text field treats its label, or a dialog its layout, is a design decision baked in. Override enough of those and you are maintaining a fork of someone else's design language, which is the worst of both options.
The core library is open source. The advanced components, mainly the more capable data grids plus some date and chart components, have commercial tiers, and the pricing is theirs rather than something we can quote. Check which tier a feature needs before you design around it, because a data grid is exactly the sort of component an entire screen gets built on.
One catalogue, in code, that both sides look at. In practice the components we ship are rendered in Storybook with their real states, and the design file references that catalogue rather than the reverse. Drift happens when the file and the running product are separately maintained descriptions of the same thing and nobody owns the difference.
Three shapes, and which fits depends on how settled the scope is. Time and materials is billed hourly and quoted per project, which suits work still moving. Fixed price is outcome based, and only after the first read, because a fixed number on a codebase nobody has opened is a guess with a contract around it. Team extension is billed monthly per engineer. The rate depends on the seniority mix the work needs, so it is quoted rather than listed.
Deciding between borrowing and building?
It is a five-year cost decision wearing a tooling choice. Tell us who uses the interface and how many products share it, and we will say which way we would go, starting from design systems.