Granularity vs Naive UI
- Kind of product
- Component librarysource
- Visual language
- Own visual language, themes as JS objectssource
- Licence
- MITsource
- Official site
- www.naiveui.com
What it is good at
TypeScript throughout, themes as data, and a reputation for a light footprint.
When to take it instead
You want themes configured in JavaScript rather than in CSS custom properties. That is a different model, not a worse one — and it fits some teams better.
What to compare, and how
There is not a single number about another library on these pages, and that is deliberate. This portal generates its own figures on every build and refuses to print any figure it cannot regenerate — someone else’s bundle size is exactly such a figure. Where a number is what you need, you get the command that measures it on your set of components, which is the only set the answer is meaningful for.
| Granularity | Check it yourself |
|---|---|
| Import granularity136 export paths: a component, a composable or a single directive, each with its own graph. | Build the app twice — with one component and with two — and compare the emitted bundles. The difference is the real price of the second component.npx vite build && du -h dist/assets/*.js |
| Runtime dependencies0 in the core. The only required peer is @floating-ui/dom, and it stays in your lockfile rather than inside the package. | Read the manifest of the package you are considering — dependencies, not devDependencies.npm view <package> dependencies |
| Token system197 tokens as named roles in both themes, published as typed data and as CSS custom properties. | Ask two questions: is there a list of roles at all, and can a role be changed without touching component sources. |
| Server renderingEvery component renders on the server and hydrates without mismatches; the contract is written down and tested on a stand. | Look for a page that says what happens on the server, not for the word “SSR” in a feature list. |
| AccessibilityA keyboard contract per component, WAI-ARIA APG patterns, contrast checked by a gate in both themes. | Open the component you need and try it with the keyboard alone. Documentation claims are cheap; Tab and Esc are not. |
| TypeScriptTypes per subpath, generated web-types for JetBrains IDEs, props and events typed from the source. | Import one component in a strict project and see whether the editor knows its props without extra plugins. |
| LicenceApache-2.0 with an ethical use clause — source-available, not OSI-approved. Named on every page that matters. | Read the LICENSE file, not the badge in the README. |
| Support modelOne maintainer, no company behind it, no paid support. Version 0.41.0 — before 1.0 breaking changes live in the changelog. | Look at the issue tracker: how long an answer takes and who gives it. |