Metrics Generated by bun run gen:metrics from the built packages. Do not edit the page by hand, because every number on it comes from a measurement. We measure Helix in two ways: the bytes it adds to your page, and the time its components take to render. We compare the bytes with other systems, because you can check a byte count on any machine. We keep the timings out of that comparison, because a timing depends on the page, the machine, and the day. How we measure We publish the method so you can repeat each measurement. The published files. Each row bundles dist, the files npm ships, with Bun 1.3.14. The bundle is minified ESM for the browser, with no source maps. Everything is bundled, including Lit. A page with no other Lit library downloads Lit, so we count it. Lit has its own row in the package table below, so you can subtract it. A package row re-exports the package, and a component row imports the component for effect. You import an element to register it, so a component row measures that import. A package row measures the whole public API. Importing a sideEffects: false package for effect measures nothing, because the bundler removes it. Gzip runs at level 9 and brotli at quality 11, the settings a CDN uses for static assets. The bundler version affects the numbers. It is pinned in packageManager and in CI, so the same source gives the same numbers in both places. Each component has two columns. Components share a runtime, so no single number gives the cost of one component: Alone is a page that imports the component's own entry and nothing else. It includes the runtime the component needs, so a sum of Alone numbers counts the runtime once for every component. Added is what the component adds to a page that already has the runtime. It leaves out the shared runtime, so it understates the cost of your first component. The cost on your page falls between the two numbers. A container that holds another family's elements does not register them, so neither column includes them. A page with a Select also imports option, and a page with a Data Table also imports table. Each component's page lists the entries to import beside it. The shared runtime The shared runtime is Lit and @fusion.dev/helix-core. Every element needs it, and no single element owns it. The Added columns are measured against it. The shared runtime is larger than most single components below. It re-exports all of @fusion.dev/helix-core, so it is the same size under every family. A family that uses only part of core leaves the rest out of its bundle, and can come in smaller than the shared runtime. No page downloads the shared runtime on its own. RawGzipBrotliLit and @fusion.dev/helix-core300,67995,98781,729 Whole packages Each row keeps everything a package exports, so it is the most the package can cost. @fusion.dev/helix and @fusion.dev/helix-headless have side effects, so a barrel import of either costs the whole row. Nothing in this repository imports either barrel. The per-component tables show what your page pays. PackageRawGzipBrotli@fusion.dev/helix-core299,63795,90481,528The element base class, mixins, decorators, and floating positioning.@fusion.dev/helix-headless1,539,213428,830323,755Every headless family. The barrel entry includes all of them.@fusion.dev/helix-icons59,68819,24716,177The whole glyph set.@fusion.dev/helix-theme4,0221,7671,563The JavaScript that runs the derivation engine. Most sites run it at build time, and a theme switcher runs it in the browser.fusion_helix_theme_bg.wasm412,026152,285123,363The derivation engine itself, in WebAssembly. The entry above loads it when the engine runs.@fusion.dev/helix2,277,624587,310421,339Every styled family.lit29,35410,2999,064Lit itself, listed so you can subtract it from every row above. Stylesheets You link these files directly, so the sizes are the files as a browser receives them. @fusion.dev/helix-styles ships its stylesheets without comments and keeps the commented sources in the repository. The shipped files are a quarter of the size of the sources. The package has no JavaScript, so the table shows the whole cost of using the base layer on its own. FileRawGzipBrotlibase.css33,9864,8154,158The base layer. It styles markup Helix does not render, and it works with no JavaScript.elements.css19,7472,9842,647Hides each element until its definition loads. It is generated from the tags in @fusion.dev/helix.helix.css207149118The other four stylesheets in one import, in the order they must load.primitives.css7,5111,4111,221The primitive layer. It is private, and it ships because tokens.css refers to it.tokens.css23,0302,8142,319The 200 semantic tokens. Every styled component needs them. What the numbers say Most of your first component is the shared runtime. The median styled family is 25,673 bytes gzipped alone, and it adds 4,667 to a page that already has Helix. The shared runtime is 82 percent of the first component, and the component itself is 18 percent. Ten typical components cost the first number once, plus nine of the added number. The two columns in the tables below let you work that out for your own components. Across the 115 styled components, the smallest is code at 13,580 bytes gzipped alone, and the largest is data-table at 74,854. Every family together is 587,310. No family imports a barrel. The barrels rule in fusion x workspace enforces that. @fusion.dev/helix-headless marks every module in dist as having side effects, which is true of a file that calls customElements.define. A bundler can remove none of it. One import { HelixHeadlessButton } from '@fusion.dev/helix-headless' costs 428,830 bytes gzipped, whatever else the page imports. That is 17 times the median family above. All 115 styled families import the headless family they extend directly. The rule checks the shape of the import, so it applies to any package that sets sideEffects, whatever its name. The headless tier never had the problem, so it serves as the control. @fusion.dev/helix-core is sideEffects: false, and the median headless family is 24,630 bytes gzipped alone. Compared with other systems We compare Helix with the libraries of custom elements listed under the table. turbo run peers measured them on October 9, 2026. It installs pinned versions into .local and bundles them with the same harness as the tables above. The Helix rows are measured on every run of bun run gen:metrics, so they always match this repository. Every system in the table is built on Lit. The runtime is the same library in every column, so the differences come from the components. React component libraries are left out, because comparing a custom element with a React component would measure the framework. The table has no whole-library row. That row would compare how many components each vendor ships and how each vendor counts a component. It would look like a measurement and mean little. The table compares components that most systems ship, and a system without one says so. ComponentSystemRawGzipBrotlibuttonHelix62,87520,74718,185Carbon133,05820,95917,685Material Web47,06014,17312,591Spectrum98,79222,04518,674Web Awesome136,04433,73028,760checkboxHelix68,04021,89319,202Carbon60,25515,60913,550Material Web43,78513,55612,015Spectrum62,49215,43713,481Web Awesome115,25128,72824,420dialogHelix64,45821,60918,901Carbon510,86667,39039,189Material Web34,23811,51010,229Spectrum155,70831,89926,262Web Awesome148,65736,69231,388radioHelix71,95222,72920,036Carbon63,05516,88714,605Material Web41,04413,23411,757Spectrum38,68510,6609,370Web Awesome112,02627,41623,128switchHelix64,76321,38218,714Carbon69,42317,12714,764Material Web50,15514,57712,935Spectrum62,32215,05913,321Web Awesome45,87615,00313,475tabsHelix76,18624,37021,435Carbon578,76673,53743,235Material Web38,88312,82011,368Spectrum64,87518,29816,283Web Awesome153,43937,03031,737tooltipHelix80,10227,73024,448Carbon189,38230,35422,273Material Webnot shippedSpectrum136,59940,55235,286Web Awesome70,56824,00521,107 At least one system is smaller than Helix on button, checkbox, dialog, radio, switch, tabs, tooltip. The largest gap is radio against Spectrum, at 12,069 bytes gzipped. 15 of 27 peer measurements are smaller than the Helix row. Helix's radio family includes Radio Group, so its row carries an element that some peer rows measure without. Carbon @carbon/web-components@2.61.0. Its dialog is Modal, its radio is Radio Button, and its switch is Toggle. Its charts are a separate library, @carbon/charts, which does not ship custom elements. Material Web @material/web@2.5.0. Ships no tooltip. Its button is measured as the filled one, there being no single button element. Its labs elements count as experimental. Spectrum @spectrum-web-components/button@1.12.2. One package per component, so there is no barrel to import by accident. Its 1,000 or so icons are each an element, and the list of what it ships leaves them out. Web Awesome @awesome.me/webawesome@3.14.0. The successor to Shoelace, measured from the free package on npm. Web Awesome Pro is sold separately and is not measured. Its tabs element is Tab Group. Every specifier we measured is in peers.json, so you can run the same measurement yourself. What each system ships Every system in the size comparison ships buttons, form controls, menus, and dialogs. This table lists jobs beyond those, and the elements each system ships for each job. Each name comes from the manifest the system publishes, read by turbo run peers on October 9, 2026. The Helix column reads @fusion.dev/helix on every run. A system covers a job when its manifest defines an element with one of a fixed list of names, after its prefix. The list is the same for every system, and it is in build-metrics.mjs. An empty cell means no element has one of those names. A system can still do the job with a pattern, a separate library, or an element under another name. JobHelixCarbonMaterial WebSpectrumWeb AwesomeChartshelix-area-chart
helix-bar-chart
helix-donut-chart
helix-heatmap
helix-line-chart
helix-scatter-chart
helix-sparkline3D chartshelix-spatial-bar-chart (experimental)
helix-spatial-heatmap (experimental)
helix-spatial-ribbon-chart (experimental)
helix-spatial-scatter-chart (experimental)
helix-spatial-surface-chart (experimental)
helix-spatial-treemap (experimental)Data tablehelix-data-table
helix-tablecds-tablesp-tableTreehelix-treecds-tree-viewwa-treeComboboxhelix-comboboxcds-combo-boxsp-comboboxDate pickerhelix-date-pickercds-date-pickerTime pickerhelix-time-pickercds-time-pickerColor pickerhelix-color-pickersp-color-area
sp-color-wheelwa-color-pickerFile uploadhelix-file-inputcds-file-uploadersp-dropzoneChathelix-chatCommand palettehelix-commandProduct tourhelix-toursp-coachmarkNode diagramshelix-canvas
helix-graphMapshelix-mapVideo playerhelix-videoCarouselhelix-carouselwa-carousel (experimental)Jobs covered16 of 166 of 160 of 165 of 163 of 16 An element marked experimental is one its system has not committed to. Helix and Web Awesome mark these with a status in their manifests, and Material Web publishes them under labs. What a component costs in time turbo run timings measured these on 2026-08-26 by loading the built packages in a real browser. Each figure is the median of 9 runs on one machine. We do not compare these timings with other systems. A byte count belongs to a package, so you can compare it with any other package. A timing depends on the page, the machine, and the day. Timings from another library, measured on another machine, would show the difference between the two machines. No check runs on these timings. A timing moves several percent between runs on one machine, and much more between machines. A check on it would fail when no code changed, and a team soon learns to ignore a check like that. verify does not run the measurement. We refresh it by hand, like the peer table, and the date above shows how current it is. ComponentTime to upgradeFirst renderHydrationbutton5.80ms0.10ms6.30mscheckbox7.00ms0.10ms6.50msdialog6.20ms0.10ms6.60mstabs6.60ms0.10ms6.90mstooltip6.90ms0.10ms7.00ms Time to upgrade is the time from the markup entering the document to its shadow root existing. During that gap you see a flash of unstyled content, which server rendering removes. The measurement parses the markup first and loads the definition after it, in the same order as a script at the end of a page. Most of the time goes to fetching and evaluating the module, so the column follows the byte tables above. First render is the time one new element takes once its definition has loaded, from construction to the end of its first update. Most of that time is spent in Lit, so it is close to the same for every family. A family far from the others does extra work in its first update. Hydration is the time from a server-rendered tree being in the document to that tree becoming live. Server rendering is worth using only if this number is small, and it is the easiest of the three to measure wrongly. We measure it against a document the server rendered and delivered. Markup assigned with innerHTML does not parse a declarative shadow root, so the element would have nothing to adopt, and every reading would be a rebuild. We check every figure above for adoption. Adoption adds nothing to the shadow root, so the count of parts before the definition arrives must equal the count after. Marking a node and looking for it later does not work as a check. Lit does not clear a shadow root it did not create, so a failed hydration keeps the mark and adds a second copy of the tree below it. On Button with the support module removed, the parts went from one to two, and the timing moved by only half a millisecond. Without the adoption check, the wrong number looks the same as the right one. A row marked (rebuilt) shows that failure, and no row has it. Per component Families are in alphabetical order. Sizes are in bytes, so you can check each number without rounding. Headless tier Structure, accessibility, state, and form participation. It has no presentation and no stylesheet to load. FamilyAlone rawAlone gzipAlone brotliAdded rawAdded gzipAdded brotliaccordion53,81418,68116,3925,3761,5071,379announcement55,22619,18716,9094,6851,3381,129app-header50,77017,61115,4825,8911,7071,418area-chart117,90340,79335,84014,4044,3933,622avatar49,50017,65015,5623,9951,2071,047badge45,56816,32414,4152,961870877bar-chart125,94443,45938,24721,9056,8145,881blockquote41,82514,84212,9942,395831796breadcrumbs55,57119,94117,5747,7462,4802,067button56,36919,33916,9435,1291,4821,259button-group48,89516,99814,9144,9171,4591,233callout53,58519,24416,9472,882947916canvas153,08748,26741,82074,25422,21518,754card41,53214,53512,7762,088605581carousel62,87421,58919,06015,3184,2233,468chat100,77233,02929,03728,7628,3606,814checkbox61,55220,43617,8613,105932850checkbox-group68,77322,39319,6028,3192,3101,776code37,18613,27111,66913668166code-block125,53142,22637,00237,29110,7228,846color-input164,65952,51245,44255,90514,39511,801color-picker126,28640,26135,01248,03112,79410,535combobox156,15949,84843,42835,9619,0487,372command123,39339,30434,16930,3358,0616,580copy-button102,99034,83030,54718,7465,0174,221data-table225,68169,51059,38290,28623,96019,285date-input163,85051,76245,21738,6579,4007,632date-picker80,70526,93423,90320,7145,6144,604description-list40,61114,22512,4591,561482408device-screen95,03230,66026,64031,8238,8217,102dialog59,32420,37517,7915,9461,7151,533divider40,69614,35912,6031,409464429donut-chart111,25638,14533,64014,7124,4593,759drawer63,93921,88919,1317,7792,2721,912drilldown63,83121,57518,9379,7032,6732,235empty42,46014,96013,1091,974624546file-input79,90427,06323,80313,1324,0883,342filter-input121,06440,44435,39121,5556,1214,918format-date48,66017,06215,0894,4701,2411,089graph118,62537,76332,76328,7988,1816,680heatmap123,32141,55336,44419,0535,5464,652icon108,19636,29231,20662,07420,91717,306icon-button56,47619,36216,9885,2361,5041,250image43,83215,20713,3983,8421,128929input67,82322,70419,8407,0042,1831,741kbd45,21216,02314,0213,5141,086857legend57,83420,06117,7192,765859824lightbox78,43926,13322,91616,7574,5673,548line-chart120,91341,68636,69116,8065,0064,286list84,07028,66024,97715,2444,3513,490listbox100,29533,08128,91915,6014,5003,576loader44,80315,84313,9612,780896764log101,98034,05430,15939,91512,33810,475map127,13138,95533,37545,85812,0389,529megamenu78,78227,63524,3068,7242,3761,890menu119,67139,54234,73130,2497,8936,495meter50,38017,88415,7634,9801,4131,173motion-toggle43,59415,51713,6261,424496369navigation54,01019,08216,6073,3591,109932notifications77,14525,74922,78418,2705,0014,087number-input78,38925,88122,81313,5573,5752,783object-inspector137,92146,14240,16836,37710,4318,436option44,18515,19713,3534,5211,1631,043outline52,07018,43016,2007,8862,5352,018pagination160,96851,61644,57346,04612,0099,602pin-input69,48023,58720,7777,2082,3291,824popover85,36829,82526,1186,4631,8331,617progress46,68916,55314,5983,004891915qr-code60,73822,21719,64816,9336,2025,326quote40,23214,30312,5411,204476365radio64,16321,24218,6563,8131,165989rating72,22224,29521,3698,0542,4011,877scatter-chart117,34140,20635,34720,4436,3785,387scroll-area48,75516,82614,8048,5162,5622,111select138,96045,86839,80326,1527,1135,632skeleton40,03114,09712,403989360356skip-link41,67914,84113,0031,218445560slider75,27624,96521,98813,6263,8193,162sparkline67,38123,65220,8905,9782,0651,836spatial-bar-chart126,77344,01138,55319,8506,4325,304spatial-heatmap138,68446,80240,95531,7149,5177,932spatial-ribbon-chart125,89743,63838,19320,7876,8475,891spatial-scatter-chart124,12742,91537,62119,0806,1995,174spatial-surface-chart127,05244,13538,68521,9447,3666,135spatial-treemap128,15944,79639,16321,3607,2496,061speed-dial87,19830,49626,86610,9272,9112,426splitter65,53122,15819,44814,4833,8403,237stat43,73915,40213,5872,312741626steps75,23225,52522,40713,7993,8293,226switch60,40420,24617,6711,677582515table140,53544,00338,05945,09112,31610,059tabs67,24022,53219,77510,4752,8202,310tag60,74321,29618,7818,4532,4701,939terminal98,50732,10427,93530,3248,1536,603textarea65,75121,93019,2605,4901,5711,341time-input193,26760,52452,24848,57212,3209,983time-picker123,49839,26334,23833,9789,0927,321timeline50,03017,76415,6494,0821,153984toast70,01924,03321,22012,1653,4602,865toggle67,06122,04619,3186,0031,7651,484toolbar54,49519,11616,7871,364446591tooltip77,30026,97223,7998,5012,3451,987tour105,73335,84331,44420,0735,4844,556tree89,31429,84926,07217,1924,8783,933trend48,53617,45515,4283,5841,076907video165,11451,58244,95466,76416,83413,940video-playlist150,15448,71642,44642,84411,1349,327virtual-list85,52428,55525,09523,3647,1055,880 Styled tier The headless tier plus presentation. bun add @fusion.dev/helix installs this tier. FamilyAlone rawAlone gzipAlone brotliAdded rawAdded gzipAdded brotliaccordion57,24519,53017,1808,7892,3742,024announcement59,83520,25017,8529,2792,4302,024app-header55,93118,81016,56411,0342,9162,460area-chart126,10542,63437,54522,5856,2915,389aura77,13625,67322,63131,7709,5938,177avatar52,49618,39716,2596,9791,9501,645badge51,07817,53815,5228,4552,1071,886bar-chart140,97146,44540,85836,9169,9018,373blockquote44,05115,38613,5324,6011,3821,218breadcrumbs62,51021,12918,65714,6633,7313,191button62,87520,74718,18511,6172,9172,489button-group52,39317,66915,5418,3982,1751,713callout57,37520,17717,8026,6551,8931,653canvas183,31753,35746,312104,11327,24022,933card45,43315,53513,6555,9721,6041,421carousel73,35923,37620,70025,7876,0395,090chat116,06135,75431,48944,03611,1189,145checkbox68,04021,89319,2029,5752,4231,991checkbox-group75,99823,99420,98515,5293,9263,276code38,04013,58011,981972355419code-block152,02146,20540,54163,77014,86012,417color-input207,12758,82751,04298,36120,65817,313color-picker163,29845,79239,93185,03518,46315,415combobox171,51052,74246,01351,29412,0149,813command134,68941,63636,27741,62310,4518,661copy-button117,04037,17032,65232,7847,3896,099data-table256,32274,85464,149120,92029,37723,934date-input185,14955,46248,57859,93713,15411,067date-picker88,74928,37225,19328,7407,0605,817description-list43,56414,95513,1534,5001,2181,158device-screen111,72733,60129,30648,50011,8549,643dialog64,45821,60918,90111,0622,9892,608divider42,99514,97613,1213,6901,107959donut-chart121,23040,25635,48224,6646,6495,614drawer69,77023,26220,38313,5913,6673,167drilldown69,50622,85220,09215,3653,9593,337empty43,76815,43213,5443,2631,051935file-input91,42829,42825,95424,6436,4475,425filter-input131,90342,57437,40132,3748,2746,916flex43,44614,64012,8744,7621,0021,042format-date48,91417,17215,2024,7061,3481,300graph143,66541,65236,14953,82112,23610,015grid45,22915,45813,6375,6541,4141,323heatmap131,63743,46738,06927,3517,3876,149icon110,54737,02831,79563,92521,45417,734icon-button66,23820,95218,38614,9803,1092,513image45,21815,67613,7995,2091,5601,295input72,07823,77720,76211,2403,2972,629kbd47,20616,56014,5295,4901,6091,404legend63,07421,37118,8087,8732,1491,836lightbox84,73127,48524,11323,0285,8954,683line-chart132,27544,08038,80928,1497,4936,384list90,41130,17626,38621,5675,8954,883listbox104,73834,20029,81920,0265,6174,522loader47,68516,59814,6655,6451,6571,494log114,49536,42532,18952,41614,78712,705map169,53045,46939,02188,25318,66215,238megamenu83,74928,75425,32313,6743,5342,879menu130,59041,68836,62941,16010,0398,434meter56,55319,23017,00911,1342,7752,433motion-toggle45,22815,98514,0643,040962922navigation57,73419,93317,3757,0681,9641,759notifications90,62628,32225,09031,7527,5486,505number-input83,37127,06323,80618,5204,7763,938object-inspector156,34949,11642,81954,79113,52211,116option47,25716,15714,2237,5762,1221,895orb53,99219,31317,00310,0093,6563,163outline56,29919,30216,95812,1013,4182,880pagination177,82954,85447,49762,89415,30412,481pin-input72,85924,49121,51510,5673,2312,673popover88,51830,59626,8239,5952,6122,265progress53,86918,18716,10110,1652,5512,310qr-code62,33822,68120,06618,5156,6925,884quote40,78914,48512,7361,743665629radio71,95222,72920,03611,5852,7132,303rating76,15725,52622,47811,9683,6242,984sandbox216,04463,61554,457139,22037,66131,088scatter-chart126,71342,32237,22429,7948,5427,065scroll-area53,76117,76815,65813,5043,5322,885select148,08647,76741,53635,2629,0197,268skeleton44,30015,30013,4744,7511,3521,182skip-link43,25015,32813,4052,771914873slider90,24127,27224,05628,5716,2025,231sparkline72,84224,98922,11111,4163,4162,970spatial-bar-chart135,83346,05540,39828,8938,5017,015spatial-heatmap148,41749,01842,97741,42911,7209,819spatial-ribbon-chart134,81045,64240,01829,6828,8847,375spatial-scatter-chart133,09544,85539,25928,0278,1446,760spatial-surface-chart135,48346,04240,34630,3569,2697,851spatial-treemap137,17146,85640,98130,3559,3027,730speed-dial94,24231,86628,08217,9554,3333,660splitter71,58223,20220,43120,5154,8504,112stat46,62316,10514,2435,1811,4491,337steps89,30628,32424,86827,8666,6615,625strands81,12729,06125,55338,19813,62112,022switch64,76321,38218,7146,0171,7011,487table158,21247,04440,78762,76515,45912,791tabs76,18624,37021,43519,4134,6673,885tag65,31722,40819,77513,0103,5932,960terminal125,51335,93231,33857,32612,1539,991text46,76215,49413,6147,1921,4561,253textarea69,68322,94920,1589,4022,6182,286time-input217,51364,64956,01472,81116,53213,632time-picker135,69141,64536,31146,16511,5139,515timeline56,92019,21816,98910,9632,6492,352toast77,91625,86822,84920,0435,3364,434toggle71,92123,28420,44410,8473,0182,474toolbar57,17119,60417,1964,026972905tooltip80,10227,73024,44811,2853,0822,552tour115,81937,86233,23130,1387,5086,237tree97,99731,78427,80025,8636,8145,738trend50,45017,99415,8855,4791,6101,378video185,61255,28148,23787,24320,40517,119video-playlist166,09051,65145,00958,76014,12811,717virtual-list87,51929,07025,53425,3397,5996,389 What an install adds to node_modules These sizes are what an install adds to your disk, which is what an install budget limits. Each row is the unpacked size of exactly what a package publishes, as listed in its files field. The sizes do not include source maps. We strip them from the tarball when we pack it, and the Source maps stripped column shows the bytes we removed. We also pack each JSON file without its whitespace, and the sizes count each one that way. PackageUnpackedFilesSource maps strippedRuntime dependencies@fusion.dev/helix-core2,281,874619825,625@floating-ui/dom, @fusion.dev/helix-icons, tslib@fusion.dev/helix-headless24,573,5167862,603,737@fusion.dev/helix-core, @fusion.dev/helix-icons, tslib, uqr@fusion.dev/helix-icons160,8282152,435svgo@fusion.dev/helix-styles122,45260none@fusion.dev/helix-theme453,15786,257none@fusion.dev/helix25,206,8421,033572,629@fusion.dev/helix-core, @fusion.dev/helix-headless, @fusion.dev/helix-styles, tslib Not measured yet We list these gaps so you know what the numbers above leave out. No whole-library comparison, and a short list of components. Adding a component means choosing the matching element in each system by hand, so we add components one at a time. The peer numbers are pinned, so they age. The comparison shows the date they were measured. Run turbo run peers to refresh them. No check fails when they are old. Another library's release changes nothing in this repository, so a check based on the date would fail for no useful reason. No first paint. The timings above measure single components. First paint depends on the whole page, so the app that renders the page should measure it. No per-component stylesheet bytes. Each family's CSS is compiled into its JavaScript, so every number above already includes it. elements.css is the light-DOM layer, and it is in the stylesheet table.