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

Results

8 UI libraries built the same /tickets screen against one spec. Every figure here is read from results/ in the repo. There is no overall score and no winner; the write-up picks per situation, and the advisor answers questions about your own project.

TL;DR

  • All 8 builds pass all 18 shared criteria.
  • Library cost over the framework baseline runs from 44.90 KB (Headless UI) to 233.87 KB (Ant Design), gzipped.
  • 1 of 8 is over the 180 KB total budget: Ant Design.
  • Median first render runs from 1373 ms to 2272 ms.*

No single winner. The pick depends on the use case (from the write-up)

The 8 builds in two groups, React and Vue, each ordered by gzipped delta, smallest first. The delta is the only figure compared across groups.
ScreenLibraryDelta, gzipTotal, against the 180 KB budgetCriteria passedaxe violations before fixesRequirements needing custom codeMedian first render
React, 5 builds
react-headless screen at 1440px wide, open the live screenHeadless UIreact-headlessassembly kit44.90 KB89.81 KB
within budget		18 of 18061373 ms*
react-shadcn screen at 1440px wide, open the live screenshadcn/uireact-shadcnassembly kit58.89 KB103.80 KB
within budget		18 of 18041389 ms*
react-mui screen at 1440px wide, open the live screenMaterial UIreact-muisuite79.76 KB124.67 KB
within budget		18 of 18031519 ms*
react-chakra screen at 1440px wide, open the live screenChakra UIreact-chakrasuite97.81 KB142.72 KB
within budget		18 of 18041650 ms*
react-antd screen at 1440px wide, open the live screenAnt Designreact-antdsuite233.87 KB278.78 KB
Over budget by 98.78 KB		18 of 18052272 ms*
Vue, 3 builds
vue-quasar screen at 1440px wide, open the live screenQuasarvue-quasarsuite91.71 KB115.92 KB
within budget		18 of 18161565 ms*
vue-vuetify screen at 1440px wide, open the live screenVuetifyvue-vuetifysuite128.87 KB153.08 KB
within budget		18 of 18061731 ms*
vue-primevue screen at 1440px wide, open the live screenPrimeVuevue-primevuesuite150.20 KB174.41 KB
within budget		18 of 18041745 ms*

* 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.

A screenshot opens that build's live screen. A library name opens its detail view, with both screenshots at full size. Assembly kits ship fewer finished parts by design, so their hand built counts on the detail views read as the trade they make.

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.

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/uiassembly 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