naive-ui

Naive UI is a Vue 3 component library providing more than 90 tree-shakable, TypeScript-first components — everything from buttons, forms, and modals to a virtualized data table and calendar. Components render their own styles at runtime via css-render rather than requiring Less, Sass, or webpack loaders, so consumers don’t need to import a separate CSS file to use them.

Theming is handled through a type-safe overrides object: passing a plain JavaScript object to a component or its config provider restyles it, with TypeScript checking the shape of every override against that component’s own theme type. The library is built entirely on Vue 3’s Composition API, shares internal _internal, _mixins, and _utils modules across components, and is tested with Vitest and Vue Test Utils across dozens of per-component test suites.

What You Get

• 90+ Vue 3 components - buttons, forms, navigation, feedback, and data-display components, all tree-shakable and importable individually.
• Type-safe theme overrides - a ThemeOverrides object per component lets you restyle colors, sizes, and spacing without touching CSS.
• Runtime CSS-in-JS styling - components render their own styles via css-render, so no separate stylesheet or preprocessor build step is needed.
• Virtualized data table and list components - large datasets render through virtual scrolling by default for performance.
• Built-in theming and RTL support - shared _mixins composables like useTheme, useConfig, and useRtl drive dark/light appearance and right-to-left layout across components.

Common Use Cases

• Admin dashboards - teams building internal tools use the data table, form, and layout components to assemble CRUD screens quickly.
• TypeScript-first Vue apps - projects that want strict typing across their UI layer adopt Naive UI because every prop and theme override is typed.
• Design-system customization - teams override the default theme tokens to match a brand palette without forking component styles.
• Rapid prototyping - the large component surface area covers most common UI needs without pulling in multiple smaller libraries.

Under The Hood

Architecture Naive UI organizes each component under src/<name>/ with a consistent demos/, src/, styles/, tests/, and index.ts layout, exporting everything through a single src/components.ts barrel and an installable create() factory in src/create.ts that registers components onto a Vue App instance with a configurable prefix. Shared cross-cutting concerns live in dedicated _internal (base primitives like NBaseLoading/NBaseWave), _mixins (composables such as useTheme, useConfig, useFormItem, useRtl), and _utils modules that every component imports rather than reimplementing, and each component’s styles are defined separately from its logic and injected through a shared css-render pipeline with SSR support via @css-render/vue3-ssr — a design that keeps component behavior, style, and theme concerns decoupled while still sharing one runtime.

Tech Stack The library is written in TypeScript on Vue 3’s Composition API (defineComponent, h, computed, watchEffect), styled via css-render instead of Sass/Less, and built with Vite for its dev/ESM/CJS bundles and tsdown for an experimental Vapor build; internal utility packages like seemly, treemate, vooks, vdirs, and vueuc (maintained within the same author ecosystem) supply lower-level primitives, while async-validator powers form validation, date-fns/date-fns-tz power date components, and highlight.js backs the code component.

Code Quality The repo carries 53+ per-component tests/ directories exercised with Vitest and @vue/test-utils, a pre-test tsc --noEmit type-check pass, strict TypeScript (strict: true, strictNullChecks: true in tsconfig.json), an @antfu/eslint-config-based ESLint setup enforced via husky + lint-staged pre-commit hooks, and a GitHub Actions workflow (.github/workflows/node.js.yml) running CI on pushes — a well-instrumented setup for a component library of this size.

What Makes It Unique Where most Vue component libraries ship precompiled Sass/Less stylesheets, Naive UI generates and injects styles at runtime through css-render, paired with a fully type-checked ThemeOverrides object per component rather than CSS custom properties or preprocessor variables — letting consumers restyle any component from plain TypeScript with compiler-verified correctness, and its data-heavy components (data table, list, virtual scroller) use virtualization by default rather than as an opt-in mode.