Abaabil
dialog/a11y580 B@radix-ui/react-dialog13,493 BBoth gzipped, JS only, measured the same way: a dialog you can actually open, imported with every part it needs, bundled with esbuild, React external, minified. Radix ships no stylesheet of its own (this comparison leaves CSS out entirely) and it bundles positioning and portal logic that abaabil does not attempt, so it is not solving exactly the same problem. Full method, caveats, and five more components against nine libraries are on the Why page.
Abaabil is a small React component library: eight components (button, dialog, combobox, input, checkbox, radio, select, accordion), plain CSS in cascade layers instead of a CSS-in-JS runtime, and zero runtime dependencies. React 19 is the only peer. New here? Start at setup.
Eight components, three tiers each
Every component ships as three import entry points, so you pay only for what you use:
abaabil/button): structure only, no styles, no ARIA logic. Several of these entries have no hooks at all, so they render in a Server Component tree with no client JavaScript.abaabil/button/styled): adds the component's CSS. Still hook-free where the component allows it.abaabil/button/a11y): adds the keyboard handling, ARIA attributes and focus management the component needs. This is the tier most apps should reach for.The three tiers of a component share one class name, so loading any one tier's stylesheet styles all of them on the page. Shipping no CSS is not the same as rendering unstyled: it means the page hasn't loaded that stylesheet yet.
Live theming
The controls below write --color-primary, --radius-md and --control-height-md onto a scope element. Every button underneath reads those same custom properties, live, because that is literally what the CSS says.
Delivered cost per entry point
Gzipped, each entry bundled with its own module graph, React treated as external (it is a peer dependency, not bundled). Grouped by component, since all 24 entries in one table stopped being readable a while ago. The CSS column is what that entry imports: the normal tier imports none, which is the whole point of it. Measured against the published abaabil@1.1.0 by the same script that produces the comparison tables on the Why page, so a component reads the same number on both. A styled entry sometimes measures a byte or two below its normal entry: that is compression noise, not a saving. styled is normal plus a stylesheet import, so the JavaScript is the same code and the CSS column is where its real cost is.
Button
| Entry | JS | CSS |
|---|---|---|
abaabil/button | 199 B | — |
abaabil/button/styled | 198 B | 551 B |
abaabil/button/a11y | 557 B | 551 B |
Dialog
| Entry | JS | CSS |
|---|---|---|
abaabil/dialog | 168 B | — |
abaabil/dialog/styled | 169 B | 371 B |
abaabil/dialog/a11y | 580 B | 371 B |
Combobox
| Entry | JS | CSS |
|---|---|---|
abaabil/combobox | 455 B | — |
abaabil/combobox/styled | 455 B | 615 B |
abaabil/combobox/a11y | 1,097 B | 615 B |
Input
| Entry | JS | CSS |
|---|---|---|
abaabil/input | 166 B | — |
abaabil/input/styled | 166 B | 497 B |
abaabil/input/a11y | 501 B | 497 B |
Checkbox
| Entry | JS | CSS |
|---|---|---|
abaabil/checkbox | 168 B | — |
abaabil/checkbox/styled | 168 B | 651 B |
abaabil/checkbox/a11y | 534 B | 651 B |
Radio
| Entry | JS | CSS |
|---|---|---|
abaabil/radio | 165 B | — |
abaabil/radio/styled | 166 B | 542 B |
abaabil/radio/a11y | 444 B | 542 B |
Select
| Entry | JS | CSS |
|---|---|---|
abaabil/select | 209 B | — |
abaabil/select/styled | 210 B | 771 B |
abaabil/select/a11y | 530 B | 771 B |
Accordion
| Entry | JS | CSS |
|---|---|---|
abaabil/accordion | 320 B | — |
abaabil/accordion/styled | 320 B | 528 B |
abaabil/accordion/a11y | 364 B | 528 B |
dialog/a11y, input/a11y, checkbox/a11y, radio/a11y, select/a11y, and every combobox entry, carry 'use client'. Every other entry point, including all three accordion entries and the three button entries, carries none, so those render in Server Components.
Browser floor
Chrome 99+, Firefox 98+, Safari 15.4+. Set by @layer and by Firefox's <dialog> support. CSS anchor positioning (used by the combobox listbox) is progressive enhancement behind @supports, not something the library depends on being available.