Nuxt UI v4 组件库 | 125+ 生产级组件，支持 Nuxt 4、Tailwind CSS v4 与 AI 集成

nuxt-ui-v4 by secondsky/claude-skills

82 周安装量

93 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/secondsky/claude-skills --skill nuxt-ui-v4

UI组件库 Vue 前端架构

🇨🇳中文介绍

Nuxt UI v4 - 生产级组件库

版本 : Nuxt UI v4.2.1 | Nuxt v4.0.0 | 125+ 组件 最后验证 : 2025-12-28

一个全面的、可用于生产环境的组件库，包含 125+ 可访问组件，Tailwind CSS v4，Reka UI 可访问性，以及一流的 AI 集成。

MCP 集成 : 此插件包含官方的 Nuxt UI MCP 服务器，用于获取实时组件数据。

何时使用 / 何时不使用

适用场景 : 构建 Nuxt v4 仪表板、AI 聊天界面、落地页、表单、管理面板、定价页面、博客、文档站点，或任何使用 Nuxt UI 组件的 UI

不适用场景 : 纯 Vue 项目（无 Nuxt）、React 项目、Nuxt 3 或更早版本、Tailwind CSS v3

快速开始

bunx nuxi init my-app && cd my-app
bun add @nuxt/ui



// nuxt.config.ts
export default defineNuxtConfig({ modules: ['@nuxt/ui'] })



<!-- app.vue -->
<template><UApp><NuxtPage /></UApp></template>
<style>
@import "tailwindcss";
@import "@nuxt/ui";
</style>

可用命令 : /nuxt-ui-v4:setup, /nuxt-ui:migrate, /nuxt-ui:theme,

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

组件分类 (总计 125+)

仪表板 (11 个组件) - 新增

完整的管理界面系统：

DashboardGroup - 具有侧边栏状态管理的固定布局包装器
DashboardSidebar - 可调整大小、可折叠的侧边栏
DashboardPanel - 具有页眉/主体/页脚插槽的主内容面板
DashboardNavbar - 顶部导航栏
DashboardToolbar - 导航栏下方的次级工具栏
DashboardSearch - 用于仪表板搜索的 CommandPalette
DashboardSearchButton - 触发搜索的按钮
DashboardSidebarCollapse - 桌面端的折叠按钮
DashboardSidebarToggle - 移动端的切换按钮
DashboardResizeHandle - 用于侧边栏/面板的调整大小手柄
<template> <UDashboardGroup> <UDashboardSidebar> <UNavigationMenu :items="menuItems" /> </UDashboardSidebar> <UDashboardPanel> <template #header><UDashboardNavbar /></template> <template #body><NuxtPage /></template> </UDashboardPanel> </UDashboardGroup> </template>

详细信息 : 加载 references/dashboard-components.md 以获取完整的仪表板模式

聊天 / AI (5 个组件) - 新增

专为 AI 聊天机器人构建，支持 AI SDK v5：

ChatMessage - 带有图标、头像、操作的单个消息
ChatMessages - 具有自动滚动、状态指示器的消息列表
ChatPalette - 覆盖层内的聊天界面
ChatPrompt - 用于 AI 提示的增强型 Textarea
ChatPromptSubmit - 具有状态处理的提交按钮
<script setup> import { Chat } from '@ai-sdk/vue' const chat = new Chat({ api: '/api/chat' }) </script> <template> <UChatMessages :messages="chat.messages" :status="chat.status"> <template #content="{ message }">{{ message.content }}</template> </UChatMessages> <UChatPrompt v-model="input" @submit="chat.sendMessage({ text: input })"> <UChatPromptSubmit :status="chat.status" /> </UChatPrompt> </template>

详细信息 : 加载 references/chat-components.md 以获取 AI SDK 集成、流式传输、错误处理

编辑器 (6 个组件) - 新增

使用 TipTap 的富文本编辑：

Editor - 基于 TipTap 的编辑器，支持 markdown/HTML/JSON
EditorToolbar - 固定、气泡或浮动工具栏
EditorDragHandle - 用于重新排序块的拖动手柄
EditorMentionMenu - @ 提及建议
EditorEmojiMenu - : 表情符号选择器
EditorSuggestionMenu - / 命令菜单
<template> <UEditor v-model="content" :extensions="extensions"> <template #toolbar> <UEditorToolbar /> </template> </UEditor> </template>

详细信息 : 加载 references/editor-components.md 以获取 TipTap 设置、扩展、工具栏自定义

页面布局 (16 个组件) - 新增

落地页和内容布局：

Page - 具有左/右列的网格布局
PageHeader - 响应式页面页眉
PageHero - 带有标题、描述、行动号召的英雄区域
PageSection - 内容区域容器
PageGrid - 响应式网格系统
PageColumns - 多列布局
PageFeature - 功能展示组件
PageCTA - 行动号召区域
PageCard - 预样式卡片，带有标题、描述、链接
PageList - 垂直列表布局
PageLogos - Logo 展示
PageAnchors - 锚点链接列表
PageAside - 粘性侧边栏
PageBody - 主内容区域
PageLinks - 链接列表
<template> <UPage> <UPageHero title="Welcome" description="Get started today" :links="heroLinks" /> <UPageSection> <UPageGrid> <UPageFeature v-for="f in features" v-bind="f" /> </UPageGrid> </UPageSection> <UPageCTA title="Ready?" :links="ctaLinks" /> </UPage> </template>

详细信息 : 加载 references/page-layout-components.md 以获取落地页模式

内容 (7 个组件) - 新增

文档和博客内容：

BlogPost - 文章展示组件
BlogPosts - 博客网格布局
ChangelogVersion - 版本条目展示
ChangelogVersions - 更新日志时间线
ContentNavigation - 用于文档的手风琴式导航
ContentSearch - 文档搜索 CommandPalette
ContentSearchButton - 打开搜索的按钮
ContentSurround - 上一个/下一个导航
ContentToc - 粘性目录
<template> <UBlogPosts> <UBlogPost v-for="post in posts" v-bind="post" /> </UBlogPosts> </template>

详细信息 : 加载 references/content-components.md 以获取博客和文档模式

定价 (3 个组件) - 新增

SaaS 定价页面：

PricingPlan - 单个方案卡片
PricingPlans - 响应式方案网格
PricingTable - 功能对比表格
<template> <UPricingPlans> <UPricingPlan v-for="plan in plans" :title="plan.title" :price="plan.price" :features="plan.features" /> </UPricingPlans> </template>

详细信息 : 加载 references/pricing-components.md 以获取定价页面模式

表单 (20 个组件)

Input, InputDate, InputTime, InputNumber, InputTags, InputMenu, Select, SelectMenu, Textarea, Checkbox, CheckboxGroup, RadioGroup, Switch, Slider, Calendar, ColorPicker, PinInput, Form, FormField, FileUpload, AuthForm

<UForm :state="state" :schema="schema" @submit="onSubmit">
  <UFormField name="email" label="Email">
    <UInput v-model="state.email" type="email" />
  </UFormField>
  <UButton type="submit">Submit</UButton>
</UForm>

详细信息 : 加载 references/form-components-reference.md 以获取验证、嵌套表单、文件上传

导航 (8 个组件)

Tabs, Breadcrumb, Link, Pagination, CommandPalette, NavigationMenu, Stepper, Tree

<UTabs v-model="tab" :items="items" />
<UCommandPalette :groups="groups" placeholder="Search..." />
<UStepper v-model="step" :items="steps" />

详细信息 : 加载 references/navigation-components-reference.md 以获取模式

覆盖层 (8 个组件)

Modal, Drawer, Slideover, Dialog, Popover, DropdownMenu, ContextMenu, Tooltip

<UModal v-model="isOpen"><UCard>Content</UCard></UModal>
<UDrawer v-model="isOpen" side="right">...</UDrawer>

详细信息 : 加载 references/overlay-decision-guide.md 以了解何时使用每种组件

反馈 (7 个组件)

Alert, Toast, Progress, Skeleton, Empty, Error, Banner

<UAlert color="warning" title="Warning message" />
<UEmpty icon="i-heroicons-inbox" title="No items" />
<UBanner title="Important announcement" />

详细信息 : 加载 references/feedback-components-reference.md

布局 (6 个组件)

Card, Container, Main, Header, Footer, FooterColumns, Separator

数据 (2 个组件)

Table (带虚拟化), ScrollArea

通用 (15 个组件)

Button, FieldGroup, Avatar, AvatarGroup, Badge, Accordion, Carousel, Chip, Collapsible, Icon, Kbd, Marquee, Timeline, User, App

颜色模式 (6 个组件)

ColorModeAvatar, ColorModeButton, ColorModeImage, ColorModeSelect, ColorModeSwitch, LocaleSelect

核心 : useToast, useOverlay, useColorMode, useFormField 工具 : defineShortcuts, defineLocale, extendLocale, extractShortcuts

const { add } = useToast()
add({ title: 'Success', color: 'success' })

defineShortcuts({ 'meta_k': () => openSearch() })

详细信息 : 加载 references/composables-guide.md

常见错误 (前 5 名)

1. 缺少 UApp 包装器 → 用 <UApp> 包装应用 2. CSS 导入顺序 → 先 @import "tailwindcss"，然后 @import "@nuxt/ui" 3. 模板引用 (v4.2+) → 使用 ref.value?.focus() 而不是 ref.value.$el.focus() 4. 模块未找到 → 在 nuxt.config.ts 的 modules 中添加 '@nuxt/ui' 5. 深色模式不工作 → 在 nuxt.config.ts 中设置 ui: { colorMode: true }

完整列表 : 加载 references/COMMON_ERRORS_DETAILED.md 以获取 25+ 错误解决方案

何时加载参考文档

仪表板/管理 : dashboard-components.md AI 聊天 : chat-components.md, ai-sdk-v5-integration.md 富文本 : editor-components.md 落地页 : page-layout-components.md 定价/SaaS : pricing-components.md 博客/文档 : content-components.md 表单 : form-components-reference.md, form-validation-patterns.md 主题 : semantic-color-system.md, component-theming-guide.md 故障排除 : COMMON_ERRORS_DETAILED.md

/nuxt-ui-v4:setup - 在项目中初始化 Nuxt UI
/nuxt-ui:migrate - 从 v2/v3 迁移到 v4
/nuxt-ui:theme - 生成主题配置
/nuxt-ui:component - 使用 Nuxt UI 模式搭建组件

nuxt-ui-component-selector - 为用例推荐最佳组件
nuxt-ui-migration-assistant - 指导 v2/v3 → v4 迁移
nuxt-ui-troubleshooter - 诊断并修复常见问题

此插件包含官方的 Nuxt UI MCP 服务器 (https://ui.nuxt.com/mcp)，提供：

组件列表和元数据
文档访问
迁移指南
模板发现

🇺🇸English

Nuxt UI v4 - Production Component Library

Version : Nuxt UI v4.2.1 | Nuxt v4.0.0 | 125+ Components Last Verified : 2025-12-28

A comprehensive production-ready component library with 125+ accessible components, Tailwind CSS v4, Reka UI accessibility, and first-class AI integration.

MCP Integration : This plugin includes the official Nuxt UI MCP server for live component data.

When to Use / NOT Use

Use when : Building Nuxt v4 dashboards, AI chat interfaces, landing pages, forms, admin panels, pricing pages, blogs, documentation sites, or any UI with Nuxt UI components

DON'T use : Vue-only projects (no Nuxt), React projects, Nuxt 3 or earlier, Tailwind CSS v3

Quick Start

bunx nuxi init my-app && cd my-app
bun add @nuxt/ui



// nuxt.config.ts
export default defineNuxtConfig({ modules: ['@nuxt/ui'] })



<!-- app.vue -->
<template><UApp><NuxtPage /></UApp></template>
<style>
@import "tailwindcss";
@import "@nuxt/ui";
</style>

Commands available : /nuxt-ui-v4:setup, /nuxt-ui:migrate, /nuxt-ui:theme, /nuxt-ui:component

Component Categories (125+ Total)

Dashboard (11 components) - NEW

Complete admin interface system:

DashboardGroup - Fixed layout wrapper with sidebar state management
DashboardSidebar - Resizable, collapsible sidebar
DashboardPanel - Main content panel with header/body/footer slots
DashboardNavbar - Top navigation bar
DashboardToolbar - Secondary toolbar under navbar
DashboardSearch - CommandPalette for dashboard search
DashboardSearchButton - Button to trigger search
DashboardSidebarCollapse - Collapse button for desktop
DashboardSidebarToggle - Toggle button for mobile
DashboardResizeHandle - Resize handle for sidebar/panels
<template> <UDashboardGroup> <UDashboardSidebar> <UNavigationMenu :items="menuItems" /> </UDashboardSidebar> <UDashboardPanel> <template #header><UDashboardNavbar /></template> <template #body><NuxtPage /></template> </UDashboardPanel> </UDashboardGroup> </template>

Details : Load references/dashboard-components.md for complete dashboard patterns

Chat / AI (5 components) - NEW

Purpose-built for AI chatbots with AI SDK v5:

ChatMessage - Single message with icon, avatar, actions
ChatMessages - Message list with auto-scroll, status indicator
ChatPalette - Chat interface inside an overlay
ChatPrompt - Enhanced Textarea for AI prompts
ChatPromptSubmit - Submit button with status handling
<script setup> import { Chat } from '@ai-sdk/vue' const chat = new Chat({ api: '/api/chat' }) </script> <template> <UChatMessages :messages="chat.messages" :status="chat.status"> <template #content="{ message }">{{ message.content }}</template> </UChatMessages> <UChatPrompt v-model="input" @submit="chat.sendMessage({ text: input })"> <UChatPromptSubmit :status="chat.status" /> </UChatPrompt> </template>

Details : Load references/chat-components.md for AI SDK integration, streaming, error handling

Editor (6 components) - NEW

Rich text editing with TipTap:

Editor - TipTap-based editor with markdown/HTML/JSON support
EditorToolbar - Fixed, bubble, or floating toolbar
EditorDragHandle - Drag handle for reordering blocks
EditorMentionMenu - @ mention suggestions
EditorEmojiMenu - : emoji picker
EditorSuggestionMenu - / command menu
<template> <UEditor v-model="content" :extensions="extensions"> <template #toolbar> <UEditorToolbar /> </template> </UEditor> </template>

Details : Load references/editor-components.md for TipTap setup, extensions, toolbar customization

Page Layout (16 components) - NEW

Landing pages and content layouts:

Page - Grid layout with left/right columns
PageHeader - Responsive page header
PageHero - Hero section with title, description, CTAs
PageSection - Content section container
PageGrid - Responsive grid system
PageColumns - Multi-column layout
PageFeature - Feature showcase component
PageCTA - Call-to-action section
PageCard - Pre-styled card with title, description, link
PageList - Vertical list layout
PageLogos - Logo showcase
PageAnchors - Anchor link list
PageAside - Sticky sidebar
PageBody - Main content area
PageLinks - Link list
<template> <UPage> <UPageHero title="Welcome" description="Get started today" :links="heroLinks" /> <UPageSection> <UPageGrid> <UPageFeature v-for="f in features" v-bind="f" /> </UPageGrid> </UPageSection> <UPageCTA title="Ready?" :links="ctaLinks" /> </UPage> </template>

Details : Load references/page-layout-components.md for landing page patterns

Content (7 components) - NEW

Documentation and blog content:

BlogPost - Article display component
BlogPosts - Blog grid layout
ChangelogVersion - Version entry display
ChangelogVersions - Changelog timeline
ContentNavigation - Accordion-style nav for docs
ContentSearch - Documentation search CommandPalette
ContentSearchButton - Button to open search
ContentSurround - Prev/next navigation
ContentToc - Sticky table of contents
<template> <UBlogPosts> <UBlogPost v-for="post in posts" v-bind="post" /> </UBlogPosts> </template>

Details : Load references/content-components.md for blog and documentation patterns

Pricing (3 components) - NEW

SaaS pricing pages:

PricingPlan - Individual plan card
PricingPlans - Responsive plan grid
PricingTable - Feature comparison table
<template> <UPricingPlans> <UPricingPlan v-for="plan in plans" :title="plan.title" :price="plan.price" :features="plan.features" /> </UPricingPlans> </template>

Details : Load references/pricing-components.md for pricing page patterns

Forms (20 components)

<UForm :state="state" :schema="schema" @submit="onSubmit">
  <UFormField name="email" label="Email">
    <UInput v-model="state.email" type="email" />
  </UFormField>
  <UButton type="submit">Submit</UButton>
</UForm>

Details : Load references/form-components-reference.md for validation, nested forms, file uploads

Navigation (8 components)

Tabs, Breadcrumb, Link, Pagination, CommandPalette, NavigationMenu, Stepper, Tree

<UTabs v-model="tab" :items="items" />
<UCommandPalette :groups="groups" placeholder="Search..." />
<UStepper v-model="step" :items="steps" />

Details : Load references/navigation-components-reference.md for patterns

Overlays (8 components)

Modal, Drawer, Slideover, Dialog, Popover, DropdownMenu, ContextMenu, Tooltip

<UModal v-model="isOpen"><UCard>Content</UCard></UModal>
<UDrawer v-model="isOpen" side="right">...</UDrawer>

Details : Load references/overlay-decision-guide.md for when to use each

Feedback (7 components)

Alert, Toast, Progress, Skeleton, Empty, Error, Banner

<UAlert color="warning" title="Warning message" />
<UEmpty icon="i-heroicons-inbox" title="No items" />
<UBanner title="Important announcement" />

Details : Load references/feedback-components-reference.md

Layout (6 components)

Card, Container, Main, Header, Footer, FooterColumns, Separator

Data (2 components)

Table (with virtualization), ScrollArea

General (15 components)

Button, FieldGroup, Avatar, AvatarGroup, Badge, Accordion, Carousel, Chip, Collapsible, Icon, Kbd, Marquee, Timeline, User, App

Color Mode (6 components)

ColorModeAvatar, ColorModeButton, ColorModeImage, ColorModeSelect, ColorModeSwitch, LocaleSelect

Composables

Core : useToast, useOverlay, useColorMode, useFormField Utilities : defineShortcuts, defineLocale, extendLocale, extractShortcuts

const { add } = useToast()
add({ title: 'Success', color: 'success' })

defineShortcuts({ 'meta_k': () => openSearch() })

Details : Load references/composables-guide.md

Common Errors (Top 5)

1. Missing UApp Wrapper → Wrap app with <UApp> 2. CSS Import Order → @import "tailwindcss" FIRST, then @import "@nuxt/ui" 3. Template Refs (v4.2+) → Use ref.value?.focus() not ref.value.$el.focus() 4. Module Not Found → Add '@nuxt/ui' to modules in nuxt.config.ts 5. Dark Mode Not Working → Set ui: { colorMode: true } in nuxt.config.ts

Full list : Load references/COMMON_ERRORS_DETAILED.md for 25+ error solutions

When to Load References

Dashboard/Admin : dashboard-components.md AI Chat : chat-components.md, ai-sdk-v5-integration.md Rich Text : editor-components.md Landing Pages : page-layout-components.md Pricing/SaaS : pricing-components.md Blog/Docs : content-components.md Forms : form-components-reference.md, form-validation-patterns.md : , :

Available Commands

/nuxt-ui-v4:setup - Initialize Nuxt UI in project
/nuxt-ui:migrate - Migrate from v2/v3 to v4
/nuxt-ui:theme - Generate theme configuration
/nuxt-ui:component - Scaffold component with Nuxt UI patterns

Available Agents

nuxt-ui-component-selector - Recommends best components for use cases
nuxt-ui-migration-assistant - Guides v2/v3 → v4 migration
nuxt-ui-troubleshooter - Diagnoses and fixes common issues

MCP Integration

This plugin includes the official Nuxt UI MCP server (https://ui.nuxt.com/mcp) providing:

Component listing and metadata
Documentation access
Migration guides
Template discovery

Weekly Installs

Repository

secondsky/claude-skills

GitHub Stars

First Seen

Jan 25, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code70

gemini-cli67

cursor66

codex65

opencode64

github-copilot63

前端开发AI工具 | 5大专业能力构建生产级前端页面 | 设计工程与动效系统

699 周安装

semantic-color-system.md

component-theming-guide.md

COMMON_ERRORS_DETAILED.md