Skip to content
AI frontend advisor
This project on GitHub, opens in a new tab

Results

shadcn/ui

react-shadcnReact,assembly kit

Within the 180 KB budget: 103.80 KB total.

Passes 18 of 18 criteria.

The tickets on every screen are made up: 240 rows from a seeded generator, the same rows for every library. Nothing you type into a screen is saved, and the next visitor sees the same data you do.

Delta, gzipped
58.89 KB
Total, against the 180 KB budget
103.80 KB
Criteria passed
18 of 18
Median first render
1389 ms*

Screenshots

react-shadcn screen at 1440px wide, open the image file
1440px wide viewport, 1440 by 900, above the fold
react-shadcn screen at 375px wide, open the image file
375px wide viewport, 375 by 812, above the fold

Hand built parts assembly kit

shadcn/ui is an assembly kit. It ships building blocks rather than finished parts, so a part the kit does not provide is written in the app, and a higher hand built count is the trade it makes.

3 of 3 hand built.

  • modalhand built
  • selecthand built
  • toasthand built

First render

1389 ms median first contentful paint.

First render is the median of 5 Lighthouse runs, taken from one Windows machine against this deployed site on 2026-09-29. The figures are relative: Lighthouse throttles to a simulated mid-tier phone, and other hardware or networks would move the milliseconds.

The result file

Every field in results/react-shadcn.json
FieldValue
Build
build		react-shadcn
Library
library		shadcn/ui
Framework
framework		react
Kind
kind		assembly-kit
Bundle size
Total, gzipped
bundle.totalGzipKb		103.80 KB
Framework baseline, gzipped
bundle.baselineGzipKb		44.91 KB
Delta, gzipped
bundle.deltaGzipKb		58.89 KB
Over budget
bundle.overBudget		no
Accessibility defaults
axe-core violations before fixes
accessibility.axeViolationsBeforeFixes		0
Requirements needing custom code
accessibility.requirementsNeedingCustomCode		4
Ergonomics
Lines of application code
ergonomics.linesOfAppCode		1445
Library imports
ergonomics.libraryImports		21
Type escapes
ergonomics.typeEscapes		0
Modal hand built
ergonomics.handBuilt.modal		yes
Select hand built
ergonomics.handBuilt.select		yes
Toast hand built
ergonomics.handBuilt.toast		yes
Time to first render
Median first contentful paint
render.lighthouseFcpMsMedian		1389 ms
Lighthouse runs
render.runs		5
Acceptance criteria
Criteria passed
criteria.passed		18
Criteria failed
criteria.failed		0
Failed criterion numbers
criteria.failedNumbers		none

The four categories as bars

Each bar is one build against the other seven on a shared scale, with the figure printed beside it. Color marks the framework and nothing else. React and Vue stay in separate groups, each ordered by delta.

  • React
  • Vue
  • Lighter bar behind: total
  • Vertical line: 180 KB budget
  • Dashed outline: over budget

Bundle size

Bundle size, gzipped

The darker bar is the delta, the build's total minus its framework baseline, and it is the only number compared across React and Vue. The lighter bar behind it is the total. The 180 KB budget applies to the total and is drawn on that scale.
React
  • Headless UIassembly kit44.90 KB delta, 89.81 KB total
  • shadcn/ui(this build)assembly kit58.89 KB delta, 103.80 KB total
  • Material UIsuite79.76 KB delta, 124.67 KB total
  • Chakra UIsuite97.81 KB delta, 142.72 KB total
  • Ant Designsuite233.87 KB delta, 278.78 KB total over budget
Vue
  • Quasarsuite91.71 KB delta, 115.92 KB total
  • Vuetifysuite128.87 KB delta, 153.08 KB total
  • PrimeVuesuite150.20 KB delta, 174.41 KB total

Accessibility defaults

Accessibility requirements needing custom code

How many of the screen spec section 9 requirements the library did not supply, so the build wrote them.
React
Vue

axe-core violations before fixes

Serious and critical violations found before any manual fix.
React
Vue

Ergonomics

Lines of application code

Counted, not judged. Assembly kits leave more of the screen to the app, so a higher count is the expected trade.
React
Vue

Hand built parts: modal, select, and toast

How many of the modal, select, and toast the build wrote itself rather than taking from the library. Assembly kits are labeled, since a higher count is the trade they make.
React
Vue

Time to first render

Median first contentful paint

First render is the median of 5 Lighthouse runs, taken from one Windows machine against this deployed site on 2026-09-29. The figures are relative: Lighthouse throttles to a simulated mid-tier phone, and other hardware or networks would move the milliseconds.
React
Vue