---
name: "naive-ui-components"
description: "Comprehensive overview of all Naive UI components organized by category. Invoke when user needs to discover available components, understand component categories, or find the right component for their use case."
metadata:
  author: jiaiyan
  version: "1.0.0"
---

# Naive UI Components Overview

Naive UI is a Vue 3 component library with over 90 components. All components are tree-shakable, written in TypeScript, and fully themeable. This skill provides a comprehensive index of all available components organized by category.

## When to Use

Use this skill when:
- **Component discovery**: Finding the right component for a specific use case
- **Project planning**: Understanding available UI building blocks
- **Component selection**: Choosing between similar components
- **Learning Naive UI**: Getting an overview of the component library
- **Migration planning**: Understanding component equivalents from other libraries

## When to Invoke

Invoke this skill when:
- User asks what components are available in Naive UI
- User needs to find a component for a specific UI pattern
- User wants to understand component categories
- User is new to Naive UI and needs an overview
- User asks about component count or coverage

## Prerequisites

- Naive UI installed (`npm install naive-ui`)
- Vue 3 application setup
- Basic understanding of Vue 3 composition API

## Component Library Overview

| Metric | Value |
|--------|-------|
| Total Components | 90+ |
| Tree-shakable | Yes |
| TypeScript | Full support |
| Theme System | Built-in CSS-in-JS |
| SSR Support | Yes |

## Component Categories

### 1. Common Components (18)

Basic UI elements used throughout applications.

| Component | Tag | Description | Skill Path |
|-----------|-----|-------------|------------|
| Button | `n-button` | Buttons with various types and states | [n-button](../components/n-button/SKILL.md) |
| Button Group | `n-button-group` | Button group container | [n-button-group](../components/n-button-group/SKILL.md) |
| Icon | `n-icon` | Icon wrapper component | [n-icon](../components/n-icon/SKILL.md) |
| Icon Wrapper | `n-icon-wrapper` | Icon with background | [n-icon-wrapper](../components/n-icon-wrapper/SKILL.md) |
| Tag | `n-tag` | Tags and labels | [n-tag](../components/n-tag/SKILL.md) |
| Badge | `n-badge` | Badges and marks | [n-badge](../components/n-badge/SKILL.md) |
| Avatar | `n-avatar` | User avatars | [n-avatar](../components/n-avatar/SKILL.md) |
| Avatar Group | `n-avatar-group` | Avatar group display | [n-avatar-group](../components/n-avatar-group/SKILL.md) |
| Card | `n-card` | Card containers | [n-card](../components/n-card/SKILL.md) |
| Divider | `n-divider` | Dividing lines | [n-divider](../components/n-divider/SKILL.md) |
| Collapse | `n-collapse` | Collapsible panels | [n-collapse](../components/n-collapse/SKILL.md) |
| Collapse Transition | `n-collapse-transition` | Collapse animation | [n-collapse-transition](../components/n-collapse-transition/SKILL.md) |
| Ellipsis | `n-ellipsis` | Text ellipsis | [n-ellipsis](../components/n-ellipsis/SKILL.md) |
| Typography | `n-typography` | Typography components | [n-typography](../components/n-typography/SKILL.md) |
| Gradient Text | `n-gradient-text` | Gradient text effect | [n-gradient-text](../components/n-gradient-text/SKILL.md) |
| Thing | `n-thing` | Thing container | [n-thing](../components/n-thing/SKILL.md) |
| Element | `n-element` | Element wrapper | [n-element](../components/n-element/SKILL.md) |
| Code | `n-code` | Code display | [n-code](../components/n-code/SKILL.md) |

### 2. Data Input Components (26)

Form controls and input components.

| Component | Tag | Description | Skill Path |
|-----------|-----|-------------|------------|
| Input | `n-input` | Text input | [n-input](../components/n-input/SKILL.md) |
| Input Number | `n-input-number` | Number input | [n-input-number](../components/n-input-number/SKILL.md) |
| Input OTP | `n-input-otp` | OTP input | [n-input-otp](../components/n-input-otp/SKILL.md) |
| Auto Complete | `n-auto-complete` | Input with suggestions | [n-auto-complete](../components/n-auto-complete/SKILL.md) |
| Select | `n-select` | Dropdown select | [n-select](../components/n-select/SKILL.md) |
| Tree Select | `n-tree-select` | Tree select | [n-tree-select](../components/n-tree-select/SKILL.md) |
| Cascader | `n-cascader` | Cascading selection | [n-cascader](../components/n-cascader/SKILL.md) |
| Checkbox | `n-checkbox` | Checkboxes | [n-checkbox](../components/n-checkbox/SKILL.md) |
| Radio | `n-radio` | Radio buttons | [n-radio](../components/n-radio/SKILL.md) |
| Switch | `n-switch` | Toggle switch | [n-switch](../components/n-switch/SKILL.md) |
| Slider | `n-slider` | Slider input | [n-slider](../components/n-slider/SKILL.md) |
| Rate | `n-rate` | Star rating | [n-rate](../components/n-rate/SKILL.md) |
| Color Picker | `n-color-picker` | Color picker | [n-color-picker](../components/n-color-picker/SKILL.md) |
| Date Picker | `n-date-picker` | Date picker | [n-date-picker](../components/n-date-picker/SKILL.md) |
| Time Picker | `n-time-picker` | Time picker | [n-time-picker](../components/n-time-picker/SKILL.md) |
| Form | `n-form` | Form management | [n-form](../components/n-form/SKILL.md) |
| Dynamic Input | `n-dynamic-input` | Dynamic input fields | [n-dynamic-input](../components/n-dynamic-input/SKILL.md) |
| Dynamic Tags | `n-dynamic-tags` | Dynamic tags input | [n-dynamic-tags](../components/n-dynamic-tags/SKILL.md) |
| Mention | `n-mention` | Mention input | [n-mention](../components/n-mention/SKILL.md) |
| Transfer | `n-transfer` | Transfer panels | [n-transfer](../components/n-transfer/SKILL.md) |
| Upload | `n-upload` | File upload | [n-upload](../components/n-upload/SKILL.md) |
| QR Code | `n-qr-code` | QR code generator | [n-qr-code](../components/n-qr-code/SKILL.md) |
| Float Button | `n-float-button` | Floating button | [n-float-button](../components/n-float-button/SKILL.md) |
| Float Button Group | `n-float-button-group` | Floating button group | [n-float-button-group](../components/n-float-button-group/SKILL.md) |

### 3. Data Display Components (20)

Components for presenting data.

| Component | Tag | Description | Skill Path |
|-----------|-----|-------------|------------|
| DataTable | `n-data-table` | Advanced data table | [n-data-table](../components/n-data-table/SKILL.md) |
| Table | `n-table` | Basic table | [n-table](../components/n-table/SKILL.md) |
| Tree | `n-tree` | Tree view | [n-tree](../components/n-tree/SKILL.md) |
| List | `n-list` | List container | [n-list](../components/n-list/SKILL.md) |
| Descriptions | `n-descriptions` | Description list | [n-descriptions](../components/n-descriptions/SKILL.md) |
| Statistic | `n-statistic` | Statistics display | [n-statistic](../components/n-statistic/SKILL.md) |
| Number Animation | `n-number-animation` | Animated numbers | [n-number-animation](../components/n-number-animation/SKILL.md) |
| Countdown | `n-countdown` | Countdown timer | [n-countdown](../components/n-countdown/SKILL.md) |
| Time | `n-time` | Time display | [n-time](../components/n-time/SKILL.md) |
| Timeline | `n-timeline` | Timeline display | [n-timeline](../components/n-timeline/SKILL.md) |
| Calendar | `n-calendar` | Calendar view | [n-calendar](../components/n-calendar/SKILL.md) |
| Image | `n-image` | Image with preview | [n-image](../components/n-image/SKILL.md) |
| Empty | `n-empty` | Empty state | [n-empty](../components/n-empty/SKILL.md) |
| Result | `n-result` | Result page | [n-result](../components/n-result/SKILL.md) |
| Skeleton | `n-skeleton` | Loading skeleton | [n-skeleton](../components/n-skeleton/SKILL.md) |
| Progress | `n-progress` | Progress bar | [n-progress](../components/n-progress/SKILL.md) |
| Spin | `n-spin` | Loading spinner | [n-spin](../components/n-spin/SKILL.md) |
| Log | `n-log` | Log display | [n-log](../components/n-log/SKILL.md) |
| Heatmap | `n-heatmap` | Heatmap visualization | [n-heatmap](../components/n-heatmap/SKILL.md) |
| Equation | `n-equation` | Math equation | [n-equation](../components/n-equation/SKILL.md) |

### 4. Navigation Components (12)

Navigation and wayfinding components.

| Component | Tag | Description | Skill Path |
|-----------|-----|-------------|------------|
| Menu | `n-menu` | Navigation menu | [n-menu](../components/n-menu/SKILL.md) |
| Tabs | `n-tabs` | Tabs | [n-tabs](../components/n-tabs/SKILL.md) |
| Breadcrumb | `n-breadcrumb` | Breadcrumb navigation | [n-breadcrumb](../components/n-breadcrumb/SKILL.md) |
| Anchor | `n-anchor` | Anchor navigation | [n-anchor](../components/n-anchor/SKILL.md) |
| Dropdown | `n-dropdown` | Dropdown menu | [n-dropdown](../components/n-dropdown/SKILL.md) |
| Popselect | `n-popselect` | Popover select | [n-popselect](../components/n-popselect/SKILL.md) |
| Steps | `n-steps` | Steps guide | [n-steps](../components/n-steps/SKILL.md) |
| Pagination | `n-pagination` | Pagination | [n-pagination](../components/n-pagination/SKILL.md) |
| Affix | `n-affix` | Sticky positioning | [n-affix](../components/n-affix/SKILL.md) |
| Back Top | `n-back-top` | Back to top button | [n-back-top](../components/n-back-top/SKILL.md) |
| Page Header | `n-page-header` | Page header | [n-page-header](../components/n-page-header/SKILL.md) |

### 5. Feedback Components (11)

User feedback and notification components.

| Component | Tag | Description | Skill Path |
|-----------|-----|-------------|------------|
| Dialog | `n-dialog` | Modal dialog | [n-dialog](../components/n-dialog/SKILL.md) |
| Modal | `n-modal` | Modal container | [n-modal](../components/n-modal/SKILL.md) |
| Drawer | `n-drawer` | Drawer panel | [n-drawer](../components/n-drawer/SKILL.md) |
| Message | `n-message` | Toast message | [n-message](../components/n-message/SKILL.md) |
| Notification | `n-notification` | Notification | [n-notification](../components/n-notification/SKILL.md) |
| Popconfirm | `n-popconfirm` | Popconfirm | [n-popconfirm](../components/n-popconfirm/SKILL.md) |
| Popover | `n-popover` | Popover | [n-popover](../components/n-popover/SKILL.md) |
| Tooltip | `n-tooltip` | Tooltip | [n-tooltip](../components/n-tooltip/SKILL.md) |
| Alert | `n-alert` | Alert messages | [n-alert](../components/n-alert/SKILL.md) |
| Loading Bar | `n-loading-bar` | Loading bar | [n-loading-bar](../components/n-loading-bar/SKILL.md) |
| Discrete | `n-discrete` | Discrete API | [n-discrete](../components/n-discrete/SKILL.md) |

### 6. Layout Components (9)

Page structure and layout components.

| Component | Tag | Description | Skill Path |
|-----------|-----|-------------|------------|
| Layout | `n-layout` | Layout container | [n-layout](../components/n-layout/SKILL.md) |
| Grid | `n-grid` | Grid system | [n-grid](../components/n-grid/SKILL.md) |
| Legacy Grid | `n-legacy-grid` | Legacy grid | [n-legacy-grid](../components/n-legacy-grid/SKILL.md) |
| Flex | `n-flex` | Flex container | [n-flex](../components/n-flex/SKILL.md) |
| Space | `n-space` | Spacing | [n-space](../components/n-space/SKILL.md) |
| Split | `n-split` | Split panels | [n-split](../components/n-split/SKILL.md) |
| Carousel | `n-carousel` | Image carousel | [n-carousel](../components/n-carousel/SKILL.md) |
| Marquee | `n-marquee` | Marquee animation | [n-marquee](../components/n-marquee/SKILL.md) |

### 7. Utility Components (8)

Helper and configuration components.

| Component | Tag | Description | Skill Path |
|-----------|-----|-------------|------------|
| Config Provider | `n-config-provider` | Global config | [n-config-provider](../components/n-config-provider/SKILL.md) |
| Scrollbar | `n-scrollbar` | Custom scrollbar | [n-scrollbar](../components/n-scrollbar/SKILL.md) |
| Virtual List | `n-virtual-list` | Virtual scroll list | [n-virtual-list](../components/n-virtual-list/SKILL.md) |
| Infinite Scroll | `n-infinite-scroll` | Infinite scroll | [n-infinite-scroll](../components/n-infinite-scroll/SKILL.md) |
| Watermark | `n-watermark` | Watermark | [n-watermark](../components/n-watermark/SKILL.md) |
| Global Style | `n-global-style` | Global styles | [n-global-style](../components/n-global-style/SKILL.md) |
| Highlight | `n-highlight` | Code highlight | [n-highlight](../components/n-highlight/SKILL.md) |

## Basic Usage

### Importing Components

Naive UI supports both global and on-demand imports:

```ts
// Global import
import naive from 'naive-ui'
app.use(naive)

// On-demand import (tree-shakable)
import { NButton, NInput, NCard } from 'naive-ui'

app.component('NButton', NButton)
app.component('NInput', NInput)
app.component('NCard', NCard)
```

### Using Components in Templates

```vue
<template>
  <n-space vertical>
    <n-card title="Welcome">
      <n-input v-model:value="text" placeholder="Type something" />
      <n-button type="primary" @click="handleClick">
        Submit
      </n-button>
    </n-card>
  </n-space>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('')

const handleClick = () => {
  console.log(text.value)
}
</script>
```

## Common Patterns

### Form with Validation

```vue
<template>
  <n-form ref="formRef" :model="model" :rules="rules">
    <n-form-item label="Name" path="name">
      <n-input v-model:value="model.name" />
    </n-form-item>
    <n-form-item label="Email" path="email">
      <n-input v-model:value="model.email" />
    </n-form-item>
    <n-form-item>
      <n-button type="primary" @click="submit">Submit</n-button>
    </n-form-item>
  </n-form>
</template>

<script setup>
import { ref, reactive } from 'vue'

const formRef = ref()
const model = reactive({ name: '', email: '' })
const rules = {
  name: [{ required: true, message: 'Name required' }],
  email: [{ required: true, type: 'email', message: 'Valid email required' }]
}

const submit = async () => {
  await formRef.value?.validate()
}
</script>
```

### Data Table with Actions

```vue
<template>
  <n-data-table
    :columns="columns"
    :data="data"
    :pagination="pagination"
  />
</template>

<script setup>
import { h } from 'vue'
import { NButton, useMessage } from 'naive-ui'

const message = useMessage()

const columns = [
  { title: 'Name', key: 'name' },
  { title: 'Age', key: 'age' },
  {
    title: 'Actions',
    key: 'actions',
    render(row) {
      return h(NButton, {
        size: 'small',
        onClick: () => message.info(`Edit ${row.name}`)
      }, { default: () => 'Edit' })
    }
  }
]

const data = [
  { name: 'John', age: 30 },
  { name: 'Jane', age: 25 }
]

const pagination = { pageSize: 10 }
</script>
```

### Modal Dialog

```vue
<template>
  <n-button @click="showModal = true">Open Modal</n-button>
  
  <n-modal v-model:show="showModal" preset="dialog" title="Confirm">
    <p>Are you sure you want to proceed?</p>
    <template #action>
      <n-button @click="showModal = false">Cancel</n-button>
      <n-button type="primary" @click="confirm">Confirm</n-button>
    </template>
  </n-modal>
</template>

<script setup>
import { ref } from 'vue'

const showModal = ref(false)

const confirm = () => {
  showModal.value = false
}
</script>
```

## Component Selection Guide

### When to Use Which Component

| Use Case | Recommended Component |
|----------|----------------------|
| Primary action | `n-button` with `type="primary"` |
| Text input | `n-input` |
| Selection from list | `n-select` |
| Boolean toggle | `n-switch` or `n-checkbox` |
| Date selection | `n-date-picker` |
| Form layout | `n-form` with `n-form-item` |
| Data grid | `n-data-table` |
| Navigation | `n-menu` or `n-tabs` |
| Modal content | `n-modal` or `n-dialog` |
| User feedback | `n-message` or `n-notification` |
| Page layout | `n-layout` with `n-layout-header`, `n-layout-content` |
| Card container | `n-card` |
| Loading state | `n-spin` or `n-skeleton` |

## Best Practices

1. **Use on-demand imports**: Import only needed components for smaller bundles
   ```ts
   import { NButton, NInput } from 'naive-ui'
   ```

2. **Wrap app with n-config-provider**: Configure theme, locale, and defaults globally
   ```vue
   <n-config-provider :theme="theme">
     <App />
   </n-config-provider>
   ```

3. **Use n-global-style with themes**: Sync global styles when using dark mode
   ```vue
   <n-config-provider :theme="theme">
     <n-global-style />
     <App />
   </n-config-provider>
   ```

4. **Leverage provider components**: Use message, dialog, notification providers
   ```vue
   <n-message-provider>
     <n-dialog-provider>
       <n-notification-provider>
         <App />
       </n-notification-provider>
     </n-dialog-provider>
   </n-message-provider>
   ```

5. **Use TypeScript**: Take advantage of full type definitions
   ```ts
   import type { DataTableColumns, FormRules } from 'naive-ui'
   ```

6. **Follow naming conventions**: Use `n-` prefix in templates
   ```vue
   <n-button>Click</n-button>
   ```

7. **Use composition API**: Components work best with Vue 3 composition API
   ```vue
   <script setup>
   import { ref } from 'vue'
   const value = ref('')
   </script>
   ```

## Related Skills

- [naive-ui-quickstart](../naive-ui-quickstart/SKILL.md): Installation and setup
- [naive-ui-theming](../naive-ui-theming/SKILL.md): Theme customization
- [naive-ui-dark-mode](../naive-ui-dark-mode/SKILL.md): Dark mode implementation
- [naive-ui-ssr](../naive-ui-ssr/SKILL.md): Server-side rendering
- [n-config-provider](../components/n-config-provider/SKILL.md): Global configuration