| name | naive-ui-design-overview |
| description | Overview of all Naive UI components organized by category. Invoke when user needs a quick reference to all available components or wants to explore the component library. |
| metadata | {"author":"jiaiyan","version":"1.0.0"} |
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)
| Component | Description |
|---|
| Affix | Fixes elements to a specific visible area |
| Avatar | User avatars with images, icons, or characters |
| AvatarGroup | Group of avatars with overlap display |
| Badge | Numbers or status marks on elements |
| Button | Basic button with various types and sizes |
| ButtonGroup | Group of buttons |
| Card | Information in card containers |
| Carousel | Image/text carousels |
| Collapse | Expandable panels |
| CollapseTransition | Collapse transition wrapper |
| Divider | Content separation lines |
| Drawer | Slide-out panels from screen edge |
| Dropdown | Dropdown menus |
| Ellipsis | Text with ellipsis and tooltip |
| Empty | Empty state placeholder |
| Icon | Icon component |
| IconWrapper | Icon wrapper for consistent sizing |
| Tag | Labels and tags |
Form Components (18)
| Component | Description |
|---|
| AutoComplete | Input with autocomplete suggestions |
| Cascader | Hierarchical selection |
| Checkbox | Multiple selection |
| ColorPicker | Color selection |
| DatePicker | Date selection |
| DynamicInput | Dynamic input fields |
| DynamicTags | Dynamic tag input |
| Form | Form management and validation |
| Input | Text input |
| InputNumber | Numeric input |
| InputOTP | One-time password input |
| Mention | @mentions in inputs |
| Radio | Single selection |
| Rate | Star rating |
| Select | Dropdown selection |
| Slider | Range slider |
| Switch | Toggle switch |
| TimePicker | Time selection |
| Transfer | Dual-column selection |
| TreeSelect | Tree-based selection |
| Upload | File upload |
Data Display Components (22)
| Component | Description |
|---|
| Avatar | User avatars |
| AvatarGroup | Avatar groups |
| Badge | Status marks |
| Calendar | Date display |
| Card | Card containers |
| Carousel | Carousels |
| Code | Code display with syntax highlighting |
| DataTable | Advanced data tables |
| Descriptions | Key-value displays |
| Empty | Empty state placeholder |
| Equation | Mathematical equations |
| GradientText | Gradient text effect |
| Heatmap | Heatmap visualization |
| Highlight | Text highlighting |
| Image | Images with preview |
| List | List container |
| Log | Console log display |
| NumberAnimation | Animated number display |
| Progress | Progress indicators |
| QRCode | QR code generation |
| Statistic | Numerical statistics |
| Table | Basic data tables |
| Thing | Thing card component |
| Timeline | Chronological events |
| Tree | Hierarchical data |
| VirtualList | Virtual scrolling list |
Navigation Components (7)
| Component | Description |
|---|
| Affix | Sticky elements |
| Anchor | Page navigation |
| Breadcrumb | Location display |
| Dropdown | Dropdown menus |
| Menu | Navigation menu |
| PageHeader | Page headers |
| Pagination | Page navigation |
| Steps | Step guide |
| Tabs | Tabbed content |
Feedback Components (11)
| Component | Description |
|---|
| Alert | Alert messages |
| Dialog | Modal dialogs |
| Drawer | Slide-out panels |
| LoadingBar | Top loading bar |
| Message | Toast messages |
| Modal | Modal dialogs |
| Notification | Corner notifications |
| Popconfirm | Confirmation dialogs |
| Popover | Rich popups |
| Result | Result pages |
| Spin | Loading spinner |
| Tooltip | Hover tooltips |
Layout Components (7)
| Component | Description |
|---|
| Divider | Content separation |
| Flex | Flexbox layout |
| Grid | CSS Grid layout |
| Layout | Page layout containers |
| LegacyGrid | Legacy 24-column grid |
| Space | Element spacing |
| Split | Resizable panels |
Typography Components (6)
| Component | Description |
|---|
| H1-H6 | Header components |
| P | Paragraph |
| Text | Styled text |
| A | Anchor/link |
| Hr | Horizontal rule |
| Ul/Ol/Li | List elements |
| Blockquote | Blockquote |
Utility Components (9)
| Component | Description |
|---|
| ConfigProvider | Global configuration |
| Discrete | Discrete component mounting |
| Element | Theme variable container |
| FloatButton | Floating action button |
| FloatButtonGroup | Floating button group |
| GlobalStyle | Global style injection |
| InfiniteScroll | Infinite scrolling |
| Marquee | Marquee scrolling text |
| Scrollbar | Custom scrollbars |
| Watermark | Watermarks |
Design Resources
| Resource | Description |
|---|
| Color | Color palette and semantics |
| Border | Border styles, radius, shadows |
| Layout | Grid and flexbox systems |
| Typography | Font conventions |
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
- Use ConfigProvider: Wrap your app with
n-config-provider for global configuration
- Tree-shaking: Import only the components you need
- Theme Variables: Use
useThemeVars() for consistent theming
- Dark Mode: Test your app in both light and dark themes
- Accessibility: Use appropriate ARIA attributes and semantic HTML
- Responsive Design: Use responsive props for mobile-first design
