# Naive UI Components

> 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.

- Skill: `jiaiyan/naive-ui-components` (Agent Skill)
- Install (CLI): `npx skillmds add jiaiyan/naive-ui-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jiaiyan/naive-ui-components/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: jiaiyan (https://skillmd.com/u/jiaiyan)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/jiaiyan/naive-ui-components

---


# 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