Benchmarks

gentleduck sizes come from the built dist/ output via gzip -c | wc -c. Radix sizes are verified via the bundlephobia.com API on 2026-03-22. Only verified data is included.

Run bun run benchmark in packages/duck-primitives to regenerate.

Library Overview

Component Coverage

Which primitives each library ships:

Bundle Size: gentleduck vs Radix

Per-component gzipped size (verified via bundlephobia API, 15 components with data from both libraries):

Verified numbers

All Components

Every primitive from both libraries side by side. 0 KB means the library doesn't ship that component.

Module Sizes + Total

Feature Comparison

Detailed feature breakdown

Size vs features: why some primitives are larger

Smaller isn't always better. gentleduck ships more behavior per component than the minimal alternatives:

When a gentleduck primitive is larger than a competitor (Radio Group at 1.9 KB vs Radix at 1.0 KB), the competitor either:

1. Delegates to separate packages. Radix splits focus, dismissal, and collection into internal packages. Each looks small, but install 5 primitives and you pay the overhead 5 times.
2. Skips the behavior. Base UI and Headless UI omit compound components, roving focus, and presence animations. You write that code.
3. Uses external state machines. Ark UI offloads to xstate/zag.js — ~15 KB of runtime not counted in the component size.

The fair comparison is total application cost: primitive size plus the code you write to fill the gaps.

Where each library wins

gentleduck wins on

• Bundle size — 50-92% smaller than Radix for most components from shared internals.
• Component count — 35+ primitives including Calendar, Command, Sheet, Input OTP that others don't ship.
• Single package — no dependency management across 28+ separate packages.
• Calendar — only headless library with a multi-calendar-system primitive.
• Source ownership — primitives live in your monorepo, not in node_modules.

Radix wins on

• Maturity — battle-tested at thousands of companies for years.
• Ecosystem — shadcn/ui, Vercel, and many design systems run on Radix.
• Radio Group size — 1.0 KB vs 1.9 KB (one case where Radix is lighter).
• Tabs — gentleduck doesn't ship a Tabs primitive yet.

Base UI wins on

• Per-component size — some components skip compound-component overhead, so they're slightly smaller.
• No compound pattern overhead — render-prop API is lighter for basic cases.
• Google backing — part of the MUI ecosystem.

Ark UI wins on

• State machines — xstate/zag.js for deterministic transitions in complex interactions.
• Color Picker — ships a color picker primitive others lack.
• Combobox — a dedicated combobox primitive (gentleduck uses Command).

Headless UI wins on

• Smallest total size — ~35 KB for the whole library, with only 10 components.
• Tailwind integration — class-based API designed for Tailwind CSS.

Why gentleduck is smaller than Radix

Radix ships each primitive as a separate npm package, each bundling its own copy of the shared internals:

Install 5 Radix primitives — ~25 KB of duplicated internals. With gentleduck, the shared internals load once (~5 KB) and each additional primitive only adds its own code.

Methodology

• gentleduck: sizes from packages/duck-primitives/dist/ — concatenate all .js files per primitive directory, then gzip -c | wc -c.
• Radix UI: sizes from the bundlephobia.com API, queried per-package on 2026-03-22. Only verified responses included.
• Base UI / Ark UI / Headless UI: component counts and feature data from the official docs. Bundle sizes excluded where bundlephobia data was unavailable.
• Sizes are minified + gzipped.
• Built with tsdown (minify: true, treeshake: true, format: 'esm').

Regenerate:

cd packages/duck-primitives
bun run benchmark

cd packages/duck-primitives
bun run benchmark

Output goes to public/benchmarks/ and apps/duck-ui-docs/public/data/benchmarks/primitives.json.