⟦ÇÍ 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íçéš~~~~~~~~~~⟧.
⟦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
| Component | uiify mean ± σ | Radix mean ± σ | Δ (uiify vs Radix) |
|---|---|---|---|
| select | 0.00 ± 0.00 | 0.00 ± 0.00 | — |
Interaction FPS (fps) — higher is better
| Component | uiify mean ± σ | Radix mean ± σ | Δ (uiify vs Radix) |
|---|---|---|---|
| select | 59.62 ± 4.12 | 59.64 ± 2.92 | -0.0% |
Forced Style/Layout (ms) — lower is better
| Component | uiify mean ± σ | Radix mean ± σ | Δ (uiify vs Radix) |
|---|---|---|---|
| select | 0.00 ± 0.00 | 0.15 ± 0.03 | -100.0% |
Heap After GC (MB) — lower is better
| Component | uiify mean ± σ | Radix mean ± σ | Δ (uiify vs Radix) |
|---|---|---|---|
| select | 13.62 ± 3.10 | 11.43 ± 3.10 | +19.2% |
Bundle Size (kB, gzipped)
| Component | uiify | Radix |
|---|---|---|
| select | 0.05 | 33.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).