react-admin vs from-scratch vs shadcn

The protocol

Three ways to build the same app

One SpaceX admin built three times by Claude (Sonnet), in 9 identical steps (00→08). Each case runs in a single continuous, "warm" agent session, driven by an orchestrator that sends one feature prompt per turn and records that turn's token/time usage. Prompts 01→08 are byte-identical across the three; only the bootstrap (step 00) differs.

The verdict

react-admin is cheapest AND polished; shadcn is polished but priciest

Adding a design system to from-scratch (shadcn) finally yields a nice UI — but it is the most expensive of the three cases. react-admin gets a polished UI (MUI) for the fewest tokens, the least time and the least code. Bare from-scratch only wins on shipped weight, at the cost of a raw UI.

New dimension — the model

Sonnet vs Opus 4.8 — same work, different model

The three cases were replayed end-to-end with Claude Opus 4.8 (byte-identical prompts, same API, same warm-agent protocol). The comparison now reads on two axes: the framework (react-admin / from-scratch / shadcn) and the model (Sonnet / Opus 4.8). Clear verdict: Opus spends about as many tokens as Sonnet on react-admin and from-scratch (±1%), and noticeably fewer on shadcn (−19%) — all in roughly half the time.

The estimated cost, on the other hand, goes up with Opus — not because it spends more, but because its rate is higher (input $5/Mtok · output $25 vs $3 · $15 for Sonnet). Despite ~8% fewer tokens overall, the Opus bill stays about 1.5× Sonnet's:

Methodological finding

The context7 effect on react-admin (v1 vs v2)

A first react-admin run (v1) went with the documentation MCP context7 over quota: Claude fell back on slow WebFetch lookups. That single broken dependency flipped the time verdict and inflated the tokens. The react-admin figures above are from run v2 (context7 live), corrected.

Flight log — 9 steps

Each step in detail

Each feature prompt (identical for all three after the bootstrap) and its token cost, with each case's approach and a real screenshot of the three final UIs where it's telling.

01

Lists + pagination

List views for the 5 resources, server-side pagination (range + Content-Range header).

react-admin 52,042 ≈ €0.14

from-scratch 60,222 ≈ €0.17

from-scratch + shadcn 84,280 ≈ €0.23

RA <List><Datagrid> — native pagination.

FS Generic ResourceList + Content-Range hook.

SH shadcn Table + Pagination, generic list.

02

References (CRUD)

create/edit/show everywhere; resolve launch→rocket & launch→launchpad to names.

react-admin 70,408 ≈ €0.19

from-scratch 90,373 ≈ €0.25

from-scratch + shadcn 127,037 ≈ €0.35

RA <ReferenceField> / <ReferenceInput>.

FS Hand-rolled getMany + <select> + generic form.

SH shadcn Dialog/Select/Dropdown + hand-rolled getMany.

Launch edit form (rocket/launchpad references resolved) — steps 02 + 03

05

Dashboard

Landing page: KPIs (total, success rate) + charts (launches/year, by rocket).

react-admin 102,168 ≈ €0.28

from-scratch 140,828 ≈ €0.39

from-scratch + shadcn 195,363 ≈ €0.54

RA useGetList/useGetMany hooks; MUI/CSS charts.

FS Hand-rolled useGetAll pager + SVG/CSS BarChart.

SH shadcn Cards + hand-rolled BarChart (no lib).

06

Calendar

Monthly calendar of launches by net date, server window net_gte/net_lte.

react-admin 113,828 ≈ €0.31

from-scratch 152,641 ≈ €0.42

from-scratch + shadcn 215,232 ≈ €0.59

RA Custom + <CustomRoutes> + custom <Layout>.

FS Calendar grid + route, hand-rolled.

SH Grid + shadcn Card/Button.

08

Extensibility: capsules

Add a whole capsules resource (spacecraft reference + to-many launches) — the marginal cost of one feature.

react-admin 130,306 ≈ €0.36

from-scratch 182,370 ≈ €0.50

from-scratch + shadcn 240,932 ≈ €0.66

RA 1 <Resource> line + 5 views, patterns reused.

FS 1 config + type + 2 registrations.

SH 1 config + 2 lines, components reused.

Good to know

Limits & a finding along the way

• Tokens include cached-context replay. One warm session per case: each step re-reads the accumulated context (mostly cache reads). The totals compare fairly; per-step values rise with context, not only with difficulty.
• The € cost is an estimate, not a bill. The run captured only total tokens per step, not the input/output/cache split. So € is computed at an assumed blended Sonnet rate (~$3/Mtok) × 0.92 €/$. The real cost is likely lower — these tokens are mostly cache reads billed at ~$0.30/Mtok. For an exact amount, ccusage reads the session JSONL and gives the billed cost per token type.
• Design has a cost. shadcn/ui yields a UI comparable to MUI, but each component (Dialog, Select, Table, Pagination…) has to be added then wired — hence ~+37% tokens vs bare from-scratch, and ~+84% vs react-admin where MUI comes with the framework.
• Orchestrated, not hand-run. An orchestrator sent one prompt per turn; passing = clean build (vite build) + verified API calls, not a full UX audit.
• A CORS bug found thanks to the screenshots. react-admin sends pagination via an HTTP Range header, which triggers a CORS preflight the API rejected (Access-Control-Allow-Headers without Range). The RA lists therefore didn't render in a real browser — invisible to agents verifying via curl (no preflight). Fixed on the API side.