Abaabil
580 B abaabil/dialog/a11y, gzipped. Of nine other libraries that ship one, the nearest is 17× that and the heaviest 152×.
- abaabil 580 B
- React Bootstrap 9,994 B
- Radix 13,493 B
- Headless UI 16,725 B
- React Aria Components 18,635 B
- shadcn/ui 25,522 B
- Mantine 26,595 B
- Chakra UI 33,085 B
- Material UI 40,166 B
- Ant Design 88,259 B
Each row is that library's own component, imported with every part it needs to actually render (a dialog you can open, a combobox you can type into), bundled with esbuild, React external, minified, gzipped, all on 21 September 2026. The arrow opens the exact package and version that run resolved. One caveat worth more than the rest: most of these libraries pay for a shared runtime once, so a single component's figure is a first-component price rather than what one more component costs you, and it is the largest number here that moves most. How the sizes are measured sets out the procedure, that caveat with the arithmetic, the judgement calls and what is left out. The argument built on the numbers is the Why page.
Abaabil is a small React component library: thirty-two components (button, dialog, alert-dialog, drawer, popover, menu, tooltip, combobox, input, textarea, file, checkbox, radio, switch, select, slider, toggle, accordion, collapsible, tabs, toolbar, breadcrumb, pagination, progress, spinner, skeleton, alert, toast, avatar, badge, card, separator), 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.
Thirty-two 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.
To see them together rather than one at a time, the kitchen sink composes a real form out of eleven of them, and the RTL demo renders the same components right to left.
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.5.1 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 | 626 B |
abaabil/combobox/a11y | 1,097 B | 626 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 | 534 B |
abaabil/accordion/a11y | 364 B | 534 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.