Naive UI Design Overview

Naive UI Component Overview

Quick reference to all Naive UI components organized by category. Naive UI is a Vue 3 component library that is fairly complete, themeable, written in TypeScript, and fast.

When to Use

• Exploring available components
• Quick component reference
• Understanding component categories
• Planning UI implementation

Component Categories

Basic Components (18)

Form Components (18)

Data Display Components (22)

Navigation Components (7)

Feedback Components (11)

Layout Components (7)

Typography Components (6)

Utility Components (9)

Design Resources

Key Features

TypeScript Support

All components are written in TypeScript with full type definitions.

import type { ButtonProps, InputProps } from 'naive-ui'

Tree-shaking

All components support tree-shaking for optimal bundle size.

import { NButton, NInput } from 'naive-ui'

Theme Customization

Advanced type-safe theme system built with TypeScript.

<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <app />
  </n-config-provider>
</template>

<script setup>
const themeOverrides = {
  common: {
    primaryColor: '#18a058'
  }
}
</script>

Dark Mode

Built-in dark theme support.

<template>
  <n-config-provider :theme="darkTheme">
    <app />
  </n-config-provider>
</template>

<script setup>
import { darkTheme } from 'naive-ui'
</script>

useThemeVars Hook

Access theme variables in JavaScript.

<script setup>
import { useThemeVars } from 'naive-ui'
const themeVars = useThemeVars()
</script>

<template>
  <div :style="{ color: themeVars.primaryColor }">
    Primary color text
  </div>
</template>

Related Skills

External Resources

Best Practices

1. Use ConfigProvider: Wrap your app with n-config-provider for global configuration
2. Tree-shaking: Import only the components you need
3. Theme Variables: Use useThemeVars() for consistent theming
4. Dark Mode: Test your app in both light and dark themes
5. Accessibility: Use appropriate ARIA attributes and semantic HTML
6. Responsive Design: Use responsive props for mobile-first design