Scoreboard

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.

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 1378 ms to 2277 ms.*
No single winner. The pick depends on the use case (from the write-up):
- Shipping fast: take a suite: Chakra UI, then Material UI
- Smallest bundle: take an assembly kit: Headless UI, then shadcn/ui
- Custom design system: shadcn/ui
- Vue: lightest of the three: Quasar
- Bundle sensitive screen: hard to justify: Ant Design

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.
Screen	Library	Delta, gzip	Total, against the 180 KB budget	Criteria passed	axe violations before fixes	Requirements needing custom code	Median first render
React, 5 builds
, open the live screen	Headless UI`react-headless` assembly kit	44.90 KB	89.81 KB within budget	18 of 18	0	6	1378 ms*
, open the live screen	shadcn/ui`react-shadcn` assembly kit	58.89 KB	103.80 KB within budget	18 of 18	0	4	1390 ms*
, open the live screen	Material UI`react-mui` suite	79.76 KB	124.67 KB within budget	18 of 18	0	3	1526 ms*
, open the live screen	Chakra UI`react-chakra` suite	97.81 KB	142.72 KB within budget	18 of 18	0	4	1653 ms*
, open the live screen	Ant Design`react-antd` suite	233.87 KB	278.78 KB Over budget by 98.78 KB	18 of 18	0	5	2277 ms*
Vue, 3 builds
, open the live screen	Quasar`vue-quasar` suite	91.71 KB	115.92 KB within budget	18 of 18	1	6	1565 ms*
, open the live screen	Vuetify`vue-vuetify` suite	128.87 KB	153.08 KB within budget	18 of 18	0	6	1741 ms*
, open the live screen	PrimeVue`vue-primevue` suite	150.20 KB	174.41 KB within budget	18 of 18	0	4	1745 ms*

* First render is the median of 5 Lighthouse runs, taken from one Windows machine against this deployed site on 2026-09-16. 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 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 UI assembly kit44.90 KB delta, 89.81 KB total
shadcn/ui assembly kit58.89 KB delta, 103.80 KB total
Material UI suite79.76 KB delta, 124.67 KB total
Chakra UI suite97.81 KB delta, 142.72 KB total
Ant Design suite233.87 KB delta, 278.78 KB total over budget

Vue

Quasar suite91.71 KB delta, 115.92 KB total
Vuetify suite128.87 KB delta, 153.08 KB total
PrimeVue suite150.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

Headless UI assembly kit6
shadcn/ui assembly kit4
Material UI suite3
Chakra UI suite4
Ant Design suite5

Vue

Quasar suite6
Vuetify suite6
PrimeVue suite4

axe-core violations before fixes

Serious and critical violations found before any manual fix.

React

Headless UI assembly kit0
shadcn/ui assembly kit0
Material UI suite0
Chakra UI suite0
Ant Design suite0

Vue

Quasar suite1
Vuetify suite0
PrimeVue suite0

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

Headless UI assembly kit1107 lines
shadcn/ui assembly kit1445 lines
Material UI suite991 lines
Chakra UI suite904 lines
Ant Design suite1029 lines

Vue

Quasar suite916 lines
Vuetify suite958 lines
PrimeVue suite957 lines

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

Headless UI assembly kit2 of 3 hand built
shadcn/ui assembly kit3 of 3 hand built
Material UI suite1 of 3 hand built
Chakra UI suite0 of 3 hand built
Ant Design suite1 of 3 hand built

Vue

Quasar suite1 of 3 hand built
Vuetify suite1 of 3 hand built
PrimeVue suite1 of 3 hand built

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-16. The figures are relative: Lighthouse throttles to a simulated mid-tier phone, and other hardware or networks would move the milliseconds.

React

Headless UI assembly kit1378 ms median
shadcn/ui assembly kit1390 ms median
Material UI suite1526 ms median
Chakra UI suite1653 ms median
Ant Design suite2277 ms median

Vue

Quasar suite1565 ms median
Vuetify suite1741 ms median
PrimeVue suite1745 ms median