Performance
Veja quanto pesa cada componente em gzip. A medida conta o código do cd/ui e deixa as bibliotecas externas de fora.
695 B
média por componente
9/32
sem JS no navegador
1.7 kB
maior componente
Os números
- Skeleton234 Bservidor
- Kbd282 Bservidor
- Separator284 Bservidor
- Card377 Bservidor
- Avatar383 Bclient
- Spinner398 Bservidor
- Textarea451 Bclient
- Field451 Bclient
- Badge453 Bservidor
- Progress465 Bclient
- Popover478 Bclient
- Radio Group522 Bclient
- Input525 Bclient
- OTP Input539 Bclient
- Form553 Bclient
- Auth Shell573 Bservidor
- Tabs613 Bclient
- Switch660 Bclient
- Slider667 Bclient
- Checkbox688 Bclient
- Alert776 Bservidor
- Tooltip794 Bclient
- Pricing Toggle885 Bclient
- Dialog898 Bclient
- Accordion912 Bclient
- Table930 Bservidor
- Dropdown Menu1.0 kBclient
- Logo1.1 kBclient
- Button1.2 kBclient
- Select1.2 kBclient
- Toast1.3 kBclient
- Password Input1.7 kBclient
Como fica leve
Servidor por padrão
Componentes sem estado não precisam de "use client": rodam no servidor e não enviam JS ao navegador.
Imports enxutos
Cada componente importa só o módulo do Base UI que usa, como @base-ui/react/dialog.
CSS onde basta
Animações, crescimento do Textarea, Spinner e Skeleton usam CSS, sem JavaScript extra.
Zod pelo núcleo
O Form usa zod/v4/core e aceita schemas de zod/mini sem puxar a API completa.
Movimento leve
As animações usam transform e opacity para evitar recalcular o layout.
Medido no build
O esbuild empacota cada componente e o gzip mede o resultado. Nada de chute.
Como medimos
O script scripts/metrics.mjs empacota cada componente com esbuild, em ESM minificado, e mede o resultado em gzip nível 9. React, Base UI, Zod, lucide e utilitários de classe ficam de fora. Assim, o número mostra o custo do próprio cd/ui; as bibliotecas externas são compartilhadas no bundle do seu projeto.