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

Component Categories

1. Common Components (18)

Basic UI elements used throughout applications.

2. Data Input Components (26)

Form controls and input components.

3. Data Display Components (20)

Components for presenting data.

4. Navigation Components (12)

Navigation and wayfinding components.

5. Feedback Components (11)

User feedback and notification components.

6. Layout Components (9)

Page structure and layout components.

7. Utility Components (8)

Helper and configuration components.

Basic Usage

Importing Components

Naive UI supports both global and on-demand imports:

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

<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

<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

<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

<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

Best Practices

1. Use on-demand imports: Import only needed components for smaller bundles

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

2. Wrap app with n-config-provider: Configure theme, locale, and defaults globally

   <n-config-provider :theme="theme">
     <App />
   </n-config-provider>
   

3. Use n-global-style with themes: Sync global styles when using dark mode

   <n-config-provider :theme="theme">
     <n-global-style />
     <App />
   </n-config-provider>
   

4. Leverage provider components: Use message, dialog, notification providers

   <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

   import type { DataTableColumns, FormRules } from 'naive-ui'
   

6. Follow naming conventions: Use n- prefix in templates

   <n-button>Click</n-button>
   

7. Use composition API: Components work best with Vue 3 composition API

   <script setup>
   import { ref } from 'vue'
   const value = ref('')
   </script>
   

Related Skills

• naive-ui-quickstart: Installation and setup
• naive-ui-theming: Theme customization
• naive-ui-dark-mode: Dark mode implementation
• naive-ui-ssr: Server-side rendering
• n-config-provider: Global configuration