naive-ui

Fairly complete Vue 3 UI component library — 90+ components with a TypeScript-first design and no dependency on legacy CSS frameworks.

naive-ui

Vue

Fairly complete Vue 3 UI component library — 90+ components with a TypeScript-first design and no dependency on legacy CSS frameworks.

npm GitHub Docs

Fit

Bundle (gzip)

421.7 kB

1.7 MB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Finding a Vue 3 component library that is fully TypeScript-compatible, actively maintained, and doesn't require you to import a full CSS reset or fight specificity issues is surprisingly difficult.

What It Does

Naive UI provides 90+ components — data tables with virtual scrolling, date/time pickers, tree selectors, cascaders, and more — all written in TypeScript with full prop type inference. It uses CSS-in-JS via css-render so there's no global stylesheet to fight, and the theme system is token-based.

Installation

bash

npm install naive-ui

Usage Example

vue

<script setup lang="ts">
import { NButton, NDataTable, NSpace } from 'naive-ui';

const columns = [{ title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }];
const data = [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }];
</script>

<template>
  <NSpace vertical>
    <NButton type="primary" @click="handleClick">Save</NButton>
    <NDataTable :columns="columns" :data="data" :bordered="false" />
  </NSpace>
</template>

Related packages

element-plusVue

A complete component library for Vue 3 with a clean, desktop-oriented design system.

floating-vueVue

Tooltip, popover, and dropdown directives for Vue 3 — powered by Floating UI with automatic placement and overflow detection.

piniaVue

The intuitive, type-safe, and lightweight state management store for Vue — the official successor to Vuex.

@tanstack/vue-queryVue

Powerful async state management for Vue — data fetching, caching, background refetching, and server state synchronization.

unplugin-vue-componentsVue

On-demand auto-import for Vue components — eliminate all manual component imports and registrations in your Vue 3 project.