Abaabil vs shadcn/ui
Both libraries, measured the same way on the same day: each entry point bundled with its own module graph, gzipped, React treated as external. All twenty-three abaabil components together come to 7,364 B. The same set from shadcn/ui, over the 21 it offers, comes to 74,098 B, or 10x the size.
What shadcn/ui is
Not a dependency. You copy its source into your own repository, where it imports Radix, lucide-react, clsx and tailwind-merge, and you own the result outright.
Per component, gzipped
abaabil's column is its a11y tier, the one most applications should use. 21 components are directly comparable; the widest gap is select at 80x. shadcn/ui has no equivalent for 2 of the twenty-three (file, toolbar), so those are left out rather than counted as a win.
| Component | abaabil | shadcn/ui | ratio |
|---|---|---|---|
| button | 557 | 10,922 | 20x |
| dialog | 580 | 25,522 | 44x |
| popover | 495 | 32,873 | 66x |
| menu | 1,120 | 40,532 | 36x |
| tooltip | 459 | 28,047 | 61x |
| combobox | 1,097 | 40,523 | 37x |
| input | 501 | 9,040 | 18x |
| textarea | 506 | 8,990 | 18x |
| checkbox | 534 | 16,407 | 31x |
| radio | 444 | 20,891 | 47x |
| switch | 423 | 13,897 | 33x |
| select | 530 | 42,657 | 80x |
| slider | 705 | 18,776 | 27x |
| accordion | 364 | 19,437 | 53x |
| tabs | 786 | 18,786 | 24x |
| breadcrumb | 335 | 10,317 | 31x |
| pagination | 689 | 9,791 | 14x |
| progress | 493 | 11,702 | 24x |
| alert | 341 | 9,406 | 28x |
| avatar | 460 | 12,038 | 26x |
| badge | 267 | 10,754 | 40x |
| all of them, one bundle | 7,364 | 74,098 | 10x |
The last row matters more than any single one above it. A library with a large shared runtime pays for it once, so the gap always narrows as you use more of it. Quoting only the widest row would be the easiest way to mislead you with real numbers.
abaabil's figures are JavaScript only, the same as every other column here, and unlike shadcn/ui it arrives already styled. That cost is real and tracked separately rather than folded in: the whole stylesheet is 5,217 B gzipped if you import all of it. The method, and every library at once, is on the Why page.
When to choose shadcn/ui instead
You want to own the code. That is a real and often correct preference, and it is not something a package can offer you: no version bump can break a file that lives in your repository. If you are already on Tailwind, it is also the shortest path from nothing to a styled, accessible application.
abaabil is twenty-three components and stops there. It has no date picker, no data grid, no virtualised list, and no plans for any of them. If the thing you need is on that list, the size comparison above is irrelevant to your decision, and you should take the library that has it.
If abaabil is the right fit
Setup is four steps and the first one is npm i abaabil. Every component has its own page with a live example at the tier you would actually import. Or read when not to use it first, which is the section written to talk you out of it.