# Naive UI — Complete Vue 3 Component Library with TypeScript

> Naive UI is a fully tree-shakable Vue 3 component library written in TypeScript. It ships over 90 components with built-in dark mode, customizable theming, and first-class TypeScript support, making it a strong choice for building modern web applications.

## Install

Save in your project root:

# Naive UI — Complete Vue 3 Component Library with TypeScript

## Quick Use
```bash
npm install naive-ui
# In your Vue 3 app:
# import { NButton } from 'naive-ui'
```

## Introduction
Naive UI provides a comprehensive set of Vue 3 components designed with TypeScript from the ground up. It focuses on developer experience with sensible defaults, extensive theming, and no mandatory CSS preprocessor dependency. All styles are generated via CSS-in-JS, which means you can customize themes without managing Sass or Less files.

## What Naive UI Does
- Delivers 90+ production-ready components including data tables, forms, modals, trees, and date pickers
- Supports dark mode out of the box with a single theme toggle
- Provides a powerful theming system that allows per-component style overrides via JavaScript objects
- Generates all styles at runtime using CSS-in-JS, removing the need for CSS preprocessors
- Offers full tree-shaking so only imported components are bundled

## Architecture Overview
Naive UI is built entirely in Vue 3 Composition API and TypeScript. It uses CSS Render, a custom CSS-in-JS engine, to generate scoped styles at runtime. Components follow a consistent props/slots/events pattern and expose type-safe interfaces. The theming layer uses a context provider that merges global and local overrides, enabling deep customization without forking components.

## Self-Hosting & Configuration
- Install via npm or yarn and import individual components for tree-shaking
- Wrap your app in `<n-config-provider>` to set global theme variables
- Switch between light and dark mode by passing `theme={darkTheme}` to the config provider
- Override specific component styles using the `theme-overrides` prop with a plain JS object
- Works with Vite, Webpack, and Nuxt out of the box with no extra plugins required

## Key Features
- Written in TypeScript with full type definitions for props, events, and slots
- CSS-in-JS styling with no CSS file imports or preprocessor setup
- Granular theming via JavaScript objects at both global and component levels
- Built-in internationalization supporting 40+ locales
- Accessibility improvements with ARIA attributes on interactive components

## Comparison with Similar Tools
- **Element Plus** — established Vue 3 library with SCSS theming; larger community but requires CSS preprocessor setup
- **Vuetify** — Material Design library for Vue with opinionated styling; richer ecosystem but heavier bundle
- **Ant Design Vue** — port of Ant Design to Vue; enterprise-focused with more components but larger footprint
- **PrimeVue** — extensive component suite with multiple theme presets; highly flexible but steeper learning curve
- **Quasar** — full framework (not just components) with build tools and mobile support; more batteries-included but more opinionated

## FAQ
**Q: Does Naive UI require Sass or Less?**
A: No. All styles are generated via CSS-in-JS at runtime. You do not need any CSS preprocessor.

**Q: Can I use Naive UI with Nuxt?**
A: Yes. Naive UI works with Nuxt 3. Use the `naive-ui` Nuxt module or import components directly with SSR-compatible configuration.

**Q: How does theming work?**
A: Wrap your app in `<n-config-provider>` and pass a theme object. You can override colors, spacing, and per-component styles using plain JavaScript objects. Dark mode is a built-in theme you can swap at runtime.

**Q: Is Naive UI suitable for production?**
A: Yes. It is used in production by many companies and has a stable API with semantic versioning. The library is actively maintained with regular releases.

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

---
Source: https://tokrepo.com/en/workflows/asset-4e126b3b
Author: AI Open Source