⟦Škíp tó çóñtéñt~~~~~~⟧
uiify

⟦Próóf~~⟧

⟦Éáçh gáté bélów fáílš á réléášé whéñ á šížé, špééd ór áççéššíbílítý tárgét íš míššéd. Évérý ñúmbér óñ thíš šíté çóméš fróm óñé óf thém.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

⟦ÇÍ gátéš~~~⟧

⟦Gáté~~⟧⟦Tárgét~~~⟧
⟦Gžíppéd búñdlé šížé~~~~~~~⟧⟦Pér-çómpóñéñt límítš íñ~~~~~~~~~⟧ .size-limit.json
⟦Tíér 0 çlíéñt JáváŠçrípt~~~~~~~~~⟧⟦0 kB — ñó Réáçt hóók máý bé çálléd~~~~~~~~~~~~⟧
⟦Ñó-JáváŠçrípt šúíté~~~~~~~⟧⟦Tíér 0 páššéš íñ fúll; Tíér 1/2 méét á dóçúméñtéd dégrádéd çóñtráçt~~~~~~~~~~~~~~~~~~~~~~~~⟧
⟦Áxé víólátíóñš~~~~~⟧⟦0 áçróšš Çhrómíúm, Fíréfóx, áñd WébKít~~~~~~~~~~~~~~⟧
⟦Líbrárý fórçéd láýóút~~~~~~~~⟧⟦0 mš óñ íñtéráçtíóñ tráçéš~~~~~~~~~~⟧
⟦Íñtéráçtíóñ látéñçý~~~~~~~⟧⟦≤ 200 mš @ 4× ÇPÚ thróttlé (Çhrómíúm)~~~~~~~~~~~~~⟧
⟦Réñdér çóúñt~~~~~⟧⟦≤ 2 Réáçt çómmítš pér íñtéráçtíóñ~~~~~~~~~~~~⟧
⟦Líghthóúšé (dóç róútéš)~~~~~~~~~⟧⟦≥ 0.95 pérfórmáñçé, 1.00 áççéššíbílítý~~~~~~~~~~~~~~⟧
⟦Çóré Wéb Vítálš~~~~~~⟧⟦LÇP ≤ 2500 mš, ÇLŠ ≤ 0.1, TBT ≤ 200 mš~~~~~~~~~~~~~~⟧

⟦Lóçál vérífíçátíóñ~~~~~~~⟧

npm run check:layout-reads    # banned geometry reads in packages
npm run checks                  # format, lint, typecheck, unit tests
npx playwright test --config=e2e/playwright-performance.config.ts
npm run bench                   # Radix comparison (local, not CI)

⟦Tíér 0 çómpóñéñtš múšt álšó pášš thé ñó-JáváŠçrípt šúíté (~~~~~~~~~~~~~~~~~~~~~⟧npm run test:no-js). ⟦Šéé Tíérš~~~~⟧

⟦Áççéššíbílítý~~~~~⟧

  • ⟦áxé-çóré~~~⟧ ⟦— žéró víólátíóñš íñ Pláýwríght áçróšš Çhrómíúm, Fíréfóx áñd WébKít, óñ štýléd hárñéšš róútéš áñd évérý públíç dóçš págé.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧
  • ⟦ÁPG álígñméñt~~~~~⟧ ⟦— ÁRÍÁ çómpóšítéš fóllów thé~~~~~~~~~~⟧ ⟦WÁÍ-ÁRÍÁ Áúthóríñg Práçtíçéš~~~~~~~~~~⟧.

⟦Šéé Áççéššíbílítý~~~~~~⟧

⟦Rádíx béñçhmárk répórt~~~~~~~~⟧

⟦Géñérátéd bý~~~~~⟧ npm run bench ⟦fróm thé répóšítórý róót. Thé šámé íñtéráçtíóñ šçríptš drívé bóth hóštš; ábšólúté ñúmbérš áré láb méášúréméñtš óñlý.~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~⟧

Performance Benchmark: uiify/components vs Radix UI

Methodology

  • Hardware: Apple M4 · darwin 25.5.0 · 16.0 GB RAM
  • Node: v24.18.0
  • uiify version: 0.0.0
  • Radix version: 2.3.7
  • Date: 2026-09-11
  • Warmup: 5 iterations (discarded)
  • Recorded: 50 iterations per metric
  • Trim: top/bottom 5%
  • Statistics: mean, stddev (median in results/*.json)
  • Hosts: uiify via apps/site /components/[slug]/test?profiler=true&controls=false (Next.js prod build); Radix via

benchmarks/app (Vite prod build, vite preview)

  • Headed Chromium, workers: 1, CPU throttle = 1 (raw rendering)

Results

React Commit Duration (ms) — lower is better

Componentuiify mean ± σRadix mean ± σΔ (uiify vs Radix)
select0.00 ± 0.000.00 ± 0.00—

Interaction FPS (fps) — higher is better

Componentuiify mean ± σRadix mean ± σΔ (uiify vs Radix)
select59.62 ± 4.1259.64 ± 2.92-0.0%

Forced Style/Layout (ms) — lower is better

Componentuiify mean ± σRadix mean ± σΔ (uiify vs Radix)
select0.00 ± 0.000.15 ± 0.03-100.0%

Heap After GC (MB) — lower is better

Componentuiify mean ± σRadix mean ± σΔ (uiify vs Radix)
select13.62 ± 3.1011.43 ± 3.10+19.2%

Bundle Size (kB, gzipped)

ComponentuiifyRadix
select0.0533.91

Notes

  • All measurements on headed Chrome (full GPU pipeline).
  • Variance reflects OS scheduler, GC, and browser internals.
  • The two hosts differ (Next.js SSR+hydration vs a standalone client app); both

are production builds driven by the same harness and BenchProfiler, but absolute numbers are lab-only and field behavior may differ.

  • Forced style/layout is measured in ms via the e2e CDP trace pipeline

(analyzeForcedLayout).