Performance
See how much each component weighs in gzip. The measurement counts cd/ui code and leaves external libraries out.
695 B
average per component
9/32
no browser JS
1.7 kB
largest component
The numbers
- Skeleton234 Bserver
- Kbd282 Bserver
- Separator284 Bserver
- Card377 Bserver
- Avatar383 Bclient
- Spinner398 Bserver
- Textarea451 Bclient
- Field451 Bclient
- Badge453 Bserver
- Progress465 Bclient
- Popover478 Bclient
- Radio Group522 Bclient
- Input525 Bclient
- OTP Input539 Bclient
- Form553 Bclient
- Auth Shell573 Bserver
- Tabs613 Bclient
- Switch660 Bclient
- Slider667 Bclient
- Checkbox688 Bclient
- Alert776 Bserver
- Tooltip794 Bclient
- Pricing Toggle885 Bclient
- Dialog898 Bclient
- Accordion912 Bclient
- Table930 Bserver
- Dropdown Menu1.0 kBclient
- Logo1.1 kBclient
- Button1.2 kBclient
- Select1.2 kBclient
- Toast1.3 kBclient
- Password Input1.7 kBclient
How it stays light
Server by default
Stateless components don't need "use client": they run on the server and send no JS to the browser.
Lean imports
Each component imports only the Base UI module it uses, such as @base-ui/react/dialog.
CSS where it's enough
Animations, Textarea growth, Spinner, and Skeleton use CSS, with no extra JavaScript.
Zod through the core
Form uses zod/v4/core and accepts zod/mini schemas without pulling in the full API.
Light motion
Animations use transform and opacity to avoid recalculating layout.
Measured at build time
esbuild bundles each component and gzip measures the result. No guessing.
How we measure
The scripts/metrics.mjs script bundles each component with esbuild, as minified ESM, and measures the result in gzip level 9. React, Base UI, Zod, lucide, and class utilities are left out. This way, the number shows the cost of cd/ui itself; external libraries are shared in your project's bundle.