Shipped to the browser
JavaScript and CSS together, gzipped
Benchmarks
Same page. Three libraries.
We built one settings page with Ermine, shadcn-vue and Nuxt UI, and measured what reached the browser and how fast it drew. Here are the numbers, how we got them, and what they do not show.
First contentful paint
Cold load, processor slowed four times
Script time while loading
Cold load, processor slowed four times
Mount 1,000 rows
Five controls in each row, at full speed
Update 1,000 rows
Every checkbox and switch flipped at once
Memory with the rows mounted
JavaScript heap after garbage collection
Elements in the rows
DOM elements for 1,000 rows
Every number
| Measurement | Ermine | shadcn-vue | Nuxt UI | No library |
|---|---|---|---|---|
| Shipped to the browser JavaScript and CSS together, gzipped | 42.1 kB | 109.3 kB | 181.4 kB | 26.5 kB |
| JavaScript Gzipped | 37.9 kB | 99.8 kB | 156.5 kB | 26.5 kB |
| CSS Gzipped | 4.1 kB | 9.6 kB | 24.9 kB | 0.0 kB |
| First contentful paint Cold load, processor slowed four times | 116 ms | 176 ms | 288 ms | 64 ms |
| Script time while loading Cold load, processor slowed four times | 37 ms | 93 ms | 185 ms | 18 ms |
| Mount 1,000 rows Five controls in each row, at full speed | 120 ms | 394 ms | 835 ms | 50 ms |
| Update 1,000 rows Every checkbox and switch flipped at once | 90 ms | 396 ms | 591 ms | 6 ms |
| Memory with the rows mounted JavaScript heap after garbage collection | 18.5 MB | 70.4 MB | 163.5 MB | 2.9 MB |
| Elements in the rows DOM elements for 1,000 rows | 6,000 | 7,000 | 12,000 | 6,000 |
"No library" is the same page in bare, unstyled HTML elements. It is the floor: what Vue itself costs before any component library.
How it was measured
- The page. A settings form using 13 components: button, input, label, card, badge, checkbox, switch, tabs, accordion, dialog, select, dropdown menu and tooltip. The same content in each library, written the way that library's documentation shows.
- The projects. Four fresh Vite 8 and Vue 3.5 projects from
npm create vite, built for production with default settings. Ermine 0.3.0; shadcn-vue 2.8 · reka-ui 2.11 · Tailwind 4.3; Nuxt UI 4.11 · Tailwind 4.3. - Size. Every JavaScript and CSS file in the build, gzipped at the highest level.
- Loading. A cold page in Chromium with the processor slowed four times, to stand in for a mid-range phone. The median of 15 loads.
- Drawing. 1,000 rows, each with a badge, an input, a checkbox, a switch and a button, are mounted, then every checkbox and switch is flipped. Timed at full speed from the change until the browser has finished layout. The median of 10 runs, each on a new page. Runs varied by a few percent.
- When. 13 October 2026, on one Apple laptop.
Why the gap
Ermine's checkbox, switch and input are native elements with styles. The other two build theirs on reka-ui, which gives each control its own JavaScript, its own memory and, in Nuxt UI's case, twice the elements. Neither choice is wrong; they buy different things. But it is most of the difference you see here.
What this does not show
- It is one page, one browser and one machine. The pages were served from the same computer, so the paint times leave out the network. The sizes are the better guide to how a real visit loads.
- The drawing test plays to Ermine's strength. It is all form controls and buttons. Opening dialogs, menus and selects was not timed, and there all three run comparable JavaScript.
- CSS grows differently. Ermine's CSS grows with each component you add; all 141 together come to about 30 kB gzipped. Tailwind's utility CSS levels off, so on a large app the gap in CSS narrows.
- Two choices favoured the others. Nuxt UI was built without a router, though its own setup guide adds one. The web font that shadcn-vue's default theme loads was removed.
- Ermine has its own gap to close. Updating 1,000 rows takes far longer than the bare-element floor. That is on our list.
These libraries do more than this test measures, and are good at it. If size and speed are not what you are short of, choose on other grounds.