# shadcn/ui alternatives for finished React app screens

2026-10-11

**Beamline and shadcn/ui both put editable component files in your repo.** Your Beamline app never depends on our
servers at runtime. You can build your own style from any look, using your fonts, public tokens, radii, density and
motion; it is not limited to changing colours. Beamline adds finished screens and rules for the agent's design
judgement: choosing the right control, connecting your app's handlers and checking the result.

Beamline source goes into `src/ui/beamline`; compiled installs keep archives in `.beamline/packages/`, committed
with your app. The hosted MCP server helps agents find and install parts; you can use the local kit tools instead.
Custom style files live in `src/styles/beamline`, which upgrades leave alone. You own your end products and changes
under Beamline's [licence](https://beamline.io/docs/licence); paid packs cannot be resold or redistributed on their own. The free
[GitHub sample](https://github.com/dprvda/beamline) is MIT. See [Install](https://beamline.io/docs/install) and [Customise](https://beamline.io/docs/customize).

shadcn/ui says of itself that it is not a component library: it is how you build your own. You get free, MIT code that
a CLI copies into your project for you to keep and modify under MIT. That is the right start when you want to design the
system yourself. People look for an alternative when they would rather start from parts that are already finished,
designed together and built for the hard screens, so their time goes to the product.

## Pick by the work you want to start with

| you want | look at | why |
|---|---|---|
| a free MIT foundation to design and extend | shadcn/ui | editable code in your repo, a large ecosystem of registries |
| marketing and app pages at volume, with a separate Figma kit | Untitled UI React | 5,000+ components and sections, 250+ page examples |
| Material Design, or enterprise grids and schedulers | MUI | free Material UI core, MUI X for the advanced data parts |
| finished product screens your coding agent assembles: trading, AI agents, voice, dashboards, settings | Beamline | 250+ local parts, a style you can rebuild and rules for the agent's choices |

## What is not in shadcn/ui's component list

shadcn/ui's list held 64 components on 10 October 2026, chat parts among them (message, bubble, attachment). These are
jobs with no component of their own there, each linked to the Beamline part, live. shadcn/ui's blocks and third-party
registries add more, at the quality each author gives them.

| job | in Beamline |
|---|---|
| a trading screen | [Order book](https://beamline.io/components/order-book), [Depth chart](https://beamline.io/components/depth-chart), [Price chart](https://beamline.io/components/price-chart), [Order ticket](https://beamline.io/components/order-ticket), [Trading terminal](https://beamline.io/components/trading-terminal) |
| an agent at work | [Reasoning](https://beamline.io/components/reasoning), [Tool call](https://beamline.io/components/tool-call), [Plan](https://beamline.io/components/plan), [Approval card](https://beamline.io/components/approval-card), [Citations](https://beamline.io/components/citations) |
| a voice agent | [Orb](https://beamline.io/components/orb), [Live waveform](https://beamline.io/components/live-waveform), [Voice button](https://beamline.io/components/voice-button), [Transcript viewer](https://beamline.io/components/transcript-viewer), [Voice agent](https://beamline.io/components/voice-agent) |
| fields beyond text | [Number field](https://beamline.io/components/number-field), [Phone input](https://beamline.io/components/phone-input), [Tag input](https://beamline.io/components/tag-input), [Colour picker](https://beamline.io/components/color-picker), [File drop zone](https://beamline.io/components/file-dropzone), [Signature pad](https://beamline.io/components/signature-pad) |
| writing | [Rich text editor](https://beamline.io/components/rich-text-editor), [Mention input](https://beamline.io/components/mention-input) |
| charts past bar, line and pie | [Sankey chart](https://beamline.io/components/sankey-chart), [Treemap](https://beamline.io/components/treemap), [Ridgeline](https://beamline.io/components/ridgeline), [Streamgraph](https://beamline.io/components/streamgraph), [Activity heatmap](https://beamline.io/components/activity-heatmap), [Gauge](https://beamline.io/components/gauge) |

## Side by side

| | Beamline | shadcn/ui |
|---|---|---|
| Price | $49 launch price, one payment, lifetime updates; a free sample (MIT) | free |
| Licence | commercial, one licence for your whole team; the free sample is MIT | MIT |
| Code in your app | editable source in `src/ui/beamline`, or compiled archives in `.beamline/packages/`; commit them with the app | a CLI copies editable component files into your project |
| Runtime | the installed UI never calls Beamline servers; the app owns its backend | the installed component code runs in your app |
| Agent support | optional MCP discovery and installation, local kit tools, field-choice rules and a local audit; the shadcn CLI can also install parts (`npx shadcn add @beamline/<element>`) | MCP server: browse, search and install from registries |
| Design | nine starting looks, or your own token-driven style: fonts, radii, density, motion, surfaces, text and chart colours; per-part CSS and editable source | a starting design you can restyle and extend in your own files |
| Built on | React 19, Radix primitives and its own code; compiled packages need no Tailwind; editable source uses Tailwind v4 | Base UI by default, with Radix and React Aria alternatives; Tailwind CSS |

Untitled UI and MUI are in the full table on [how Beamline compares](https://beamline.io/compare).

## Move a screen with your agent

Beamline's compiled packages, inside their own `UIRoot`, sit beside shadcn/ui without changing its controls, and they
need no Tailwind, so nothing has to move at once. Beamline is also a shadcn registry; parts installed that way, as
editable source, share Tailwind v4's theme with your app, so follow the source-theme steps in
[Install](https://beamline.io/docs/install). [Connect your agent](https://beamline.io/connect), then send it this for one screen:

```text
Rebuild this screen with Beamline and leave the rest of the app on shadcn/ui: 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 old components until I have compared the two.
```

The [agent setup guide](https://beamline.io/guides/coding-agent-component-system) walks through what the agent reads and installs, and
[building your own style](https://beamline.io/guides/theme-react-components-brand-colour) shows how to adapt the whole visual system.

## When shadcn/ui is the better choice

- You want everything free and open source. Beamline's complete system is paid; only its sample is MIT.
- You want to design the foundation yourself and need MIT redistribution rights for the whole system.
- You need Vue or Svelte: shadcn/ui has community ports, Beamline is React 19 only.
- You want the largest ecosystem: shadcn/ui's registries and community are far bigger.

## Sources

Read on 10 October 2026; 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; shadcn/ui's
[Open Code documentation](https://ui.shadcn.com/docs#open-code) was rechecked the same day.

- shadcn/ui: [React Aria option](https://ui.shadcn.com/docs/changelog/2026-07-react-aria), [introduction](https://ui.shadcn.com/docs), [components](https://ui.shadcn.com/docs/components),
  [MCP server](https://ui.shadcn.com/docs/mcp),
  [Base UI as the default](https://ui.shadcn.com/docs/changelog/2026-07-base-ui-default)
- Untitled UI React: [React product and pricing](https://www.untitledui.com/react), [separate Figma pricing](https://www.untitledui.com/figma)
- MUI: [pricing](https://mui.com/pricing/)
- Beamline: [pricing](https://beamline.io/pricing), [licence](https://beamline.io/licence), [known limitations](https://beamline.io/docs/limitations), [the library](https://beamline.io/components/)