Skip to content
UI library comparison

Scoreboard

Chakra UI

react-chakraReact,suite

Within the 180 KB budget: 142.72 KB total.

Passes 18 of 18 criteria.

Delta, gzipped
97.81 KB
Total, against the 180 KB budget
142.72 KB
Criteria passed
18 of 18
Median first render
1653 ms*

Screenshots

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

Hand built parts suite

Chakra UI is a component suite.

0 of 3 hand built.

  • modalfrom the library
  • selectfrom the library
  • toastfrom the library

First render

1653 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-16. 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-chakra.json
FieldValue
Build
build		react-chakra
Library
library		Chakra UI
Framework
framework		react
Kind
kind		suite
Bundle size
Total, gzipped
bundle.totalGzipKb		142.72 KB
Framework baseline, gzipped
bundle.baselineGzipKb		44.91 KB
Delta, gzipped
bundle.deltaGzipKb		97.81 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		904
Library imports
ergonomics.libraryImports		9
Type escapes
ergonomics.typeEscapes		0
Modal hand built
ergonomics.handBuilt.modal		no
Select hand built
ergonomics.handBuilt.select		no
Toast hand built
ergonomics.handBuilt.toast		no
Time to first render
Median first contentful paint
render.lighthouseFcpMsMedian		1653 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/uiassembly kit58.89 KB delta, 103.80 KB total
  • Material UIsuite79.76 KB delta, 124.67 KB total
  • Chakra UI(this build)suite97.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-16. The figures are relative: Lighthouse throttles to a simulated mid-tier phone, and other hardware or networks would move the milliseconds.
React
Vue