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' ] } )

<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

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

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

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

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

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

Details

Load

references/pricing-components.md

for pricing page patterns

Forms (20 components)

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

Submit

Details

Load

references/form-components-reference.md

for validation, nested forms, file uploads

Navigation (8 components)

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

Details

Load

references/navigation-components-reference.md

for patterns

Overlays (8 components)

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

Content

...

Details

Load

references/overlay-decision-guide.md

for when to use each

Feedback (7 components)

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

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

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:

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 Theming : semantic-color-system.md , component-theming-guide.md Troubleshooting : COMMON_ERRORS_DETAILED.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