# Naive UI — Feature-Rich Vue 3 Component Library with TypeScript

> Naive UI is a Vue 3 component library written entirely in TypeScript, offering over 90 components with built-in dark mode, tree-shaking, and comprehensive theme customization.

## Install

Save in your project root:

# Naive UI — Feature-Rich Vue 3 Component Library with TypeScript

## Quick Use
```bash
npm install naive-ui
```
```vue
<script setup>
import { NButton, NCard } from 'naive-ui';
</script>
<template>
  <n-card title="Hello">
    <n-button type="primary">Click me</n-button>
  </n-card>
</template>
```

## Introduction
Naive UI is a Vue 3 component library built from scratch in TypeScript. It provides a large collection of components with consistent design, first-class dark mode support, and a flexible theme system that lets you customize tokens at every level.

## What Naive UI Does
- Provides 90+ components covering forms, data display, navigation, and feedback
- Ships with light and dark themes with one-line switching
- Supports per-component and global theme token overrides
- Offers tree-shakable imports to keep production bundles lean
- Includes built-in internationalization for 40+ locales

## Architecture Overview
Each component is a standalone Vue 3 composition-API module with its own style tokens. The theme system uses a provider pattern where an NConfigProvider at the root injects design tokens down the tree. Components read these tokens at render time, so switching themes or overriding variables takes effect immediately without rebuilding styles.

## Self-Hosting & Configuration
- Install via npm and import components individually for tree-shaking
- Wrap your app with NConfigProvider to set the global theme
- Override specific tokens by passing a themeOverrides object
- Use unplugin-auto-import and unplugin-vue-components for on-demand imports
- Configure NMessageProvider and NDialogProvider at the root for imperative APIs

## Key Features
- Written entirely in TypeScript with complete type definitions
- Built-in dark mode toggle with smooth transition
- Theme editor tool for previewing token changes in real time
- Virtualized select, table, and tree components for large datasets
- Accessible with ARIA attributes and keyboard navigation

## Comparison with Similar Tools
- **Element Plus** — mature Vue 3 library with a larger community, more opinionated design
- **Vuetify** — Material Design system, heavier bundle
- **Ant Design Vue** — port of Ant Design, enterprise-oriented
- **PrimeVue** — large component count with multiple theme presets
- **Quasar** — full framework with CLI and mobile builds, higher learning curve

## FAQ
**Q: Does Naive UI support Vue 2?**
A: No. It is designed exclusively for Vue 3 and the Composition API.

**Q: How do I enable dark mode?**
A: Pass the darkTheme import to NConfigProvider's theme prop.

**Q: Is tree-shaking supported?**
A: Yes. Import components individually or use the auto-import plugins.

**Q: Can I use Naive UI with Nuxt?**
A: Yes. Community modules like naive-ui-nuxt provide SSR-compatible integration.

## Sources
- https://github.com/tusen-ai/naive-ui
- https://www.naiveui.com/

---
Source: https://tokrepo.com/en/workflows/6638900c-41f2-11f1-9bc6-00163e2b0d79
Author: AI Open Source