# MUI alternatives for React apps

2026-10-11

**Beamline code stays in your repo; your app never depends on Beamline servers at runtime.** You can build your own
style from any look with public tokens, fonts, radii, density and motion. Editable source lives in `src/ui/beamline`;
compiled archives live in `.beamline/packages/`, committed with the app. Custom style files live in
`src/styles/beamline`, which upgrades leave alone. The hosted MCP server only helps agents find and install parts;
the local kit tools are another install path. See [Install](https://beamline.io/docs/install) and [Customise](https://beamline.io/docs/customize).

You own your end products and changes under the [licence](https://beamline.io/docs/licence); the paid packs cannot be resold or
redistributed on their own. The free [GitHub sample](https://github.com/dprvda/beamline) is MIT.

MUI is two things. Material UI, its core library, is free and MIT and follows Google's Material Design. MUI X adds the
data parts (data grid, charts, date and time pickers, tree view, a scheduler), with their advanced features under Pro and
Premium licences paid per developer, as annual subscriptions or perpetual licences. People look for an alternative when they want their app not to look like Material, or
when the yearly bill for MUI X grows with every developer they hire.

## What a team pays in its first year

As listed on 10 October 2026, annual billing. Material UI's core costs nothing at any size.

| developers | MUI X Pro ($299 each a year) | MUI X Premium ($599 each a year) | Beamline (one payment, whole team) |
|---|---|---|---|
| 1 | $299 | $599 | $49 |
| 3 | $897 | $1,797 | $49 |
| 5 | $1,495 | $2,995 | $49 |
| 10 | $2,990 | $5,990 | $49 |

Annual MUI X subscriptions renew every year. Perpetual licences cost $657 Pro or $1,318 Premium per developer, with one
year of maintenance.
Beamline's one payment covers the whole team and includes lifetime updates: new versions of the complete system for as
long as we publish it, and every version you received stays yours.

## Pick by the job

| you need | look at | why |
|---|---|---|
| Material Design, or the look Google's apps share | MUI | Material UI implements it for React |
| pivoting, an event scheduler or Gantt charts | MUI X | they are on its price list (check which tier); Beamline has none of them |
| your own design system on free code | shadcn/ui | MIT code you own and change |
| product screens your coding agent builds, in dark and light: dashboards, CRM, AI agents, trading, voice | Beamline | 250+ parts in one design language, installed and audited by the agent |

## The data parts, job by job

What Beamline's own parts do, each live in the library. MUI X covers more ground in grids and scheduling; Beamline
covers the jobs below in one look with the rest of the app.

| job | in Beamline |
|---|---|
| a grid for thousands of rows | [Data grid](https://beamline.io/components/data-grid): virtualised, multi-sort, search and value filters, resizable and pinned columns, range selection, inline edit, footer totals, keyboard cell navigation |
| measures on one time axis | [Composed chart](https://beamline.io/components/composed-chart): bars, lines and areas per series, two value axes, reference lines |
| a reporting range | [Date range picker](https://beamline.io/components/date-range-picker): presets beside two months, the day count in the footer |
| nested records | [Tree view](https://beamline.io/components/tree-view): the full tree keyboard model, depth guides, counts |
| a whole dashboard | [Analytics dashboard](https://beamline.io/components/analytics-dashboard): KPIs, revenue, channels and uptime under one set of filters |
| a pipeline on the grid | [CRM](https://beamline.io/components/crm): deals grid with inline edit, bulk moves and delete with undo |

More charts (sankey, treemap, ridgeline, streamgraph) are in [charts and data-vis](https://beamline.io/components/charts).

## Agents

MUI's MCP server answers from MUI's documentation and code references; it does not install parts into your app.
Beamline's optional MCP install workflow has the agent pick the most specific part for every field, install only those locally, and run an audit
that flags raw inputs and hard-coded colours before the agent calls the screen done. The
[agent setup guide](https://beamline.io/guides/coding-agent-component-system) shows each step.

The installed UI makes no calls to Beamline's servers. You can keep editing the local source and your style files
without the MCP server. Per-part `className`, `data-slot` and `data-state` hooks support app CSS; your own parts can
use the same surface roles. The component styles sit in `@layer components`, below normal unlayered app CSS.

## Move a screen with your agent

Beamline's compiled packages, inside their own `UIRoot`, can sit beside MUI in the same app while you move.
[Connect your agent](https://beamline.io/connect), then send it this, one screen at a time:

```text
Rebuild this screen with Beamline and leave the rest of the app on MUI: call beamline_capabilities, map
every field and pattern to the most specific Beamline part and write the table into BEAMLINE.md, install
them with one beamline_install (compiled packages, in their own UIRoot), keep my data and handlers, then run
the audit and fix every FIX line.
Keep the MUI version until I have compared the two.
```

## When MUI is the better choice

- You want Material Design, or a Google-like look. Beamline has its own nine looks, each in dark and light.
- You need MUI X's pivoting, scheduler or Gantt charts.
- You only need core components and want them free: Material UI costs nothing.
- You need real Safari on macOS/iOS verified today: Beamline’s browser evidence covers Chromium and Playwright Firefox/WebKit on Linux, with known phone visual issues ([scope and results](https://beamline.io/tested)).

## Sources

Read on 10 October 2026; prices change, so check them before you decide.

Local-code and custom-style correction checked on 11 October 2026 against Beamline's [install](https://beamline.io/docs/install),
[customise](https://beamline.io/docs/customize), [upgrade](https://beamline.io/docs/upgrade) and [licence](https://beamline.io/docs/licence) docs.

- MUI: [pricing](https://mui.com/pricing/), [licensing](https://mui.com/x/introduction/licensing/), [MCP server](https://mui.com/material-ui/getting-started/mcp/)
- shadcn/ui: [introduction](https://ui.shadcn.com/docs)
- Beamline: [pricing](https://beamline.io/pricing), [licence](https://beamline.io/licence), [the library](https://beamline.io/components/), [how Beamline compares](https://beamline.io/compare)