Components
Quick-reference index of all 125+ components. For full API docs (props, slots, events, examples), use the MCP get-component or get-component-metadata tools.
Layout
| Component |
Purpose |
UApp |
Required root wrapper — toasts, tooltips, overlays, i18n |
UHeader |
Responsive header with mobile menu |
UFooter |
Footer with left/right/top/bottom slots |
UFooterColumns |
Multi-column footer with link groups |
UMain |
Main content area |
UContainer |
Centered max-width container |
USplitter |
Resizable panels separated by draggable handles |
ULink |
Enhanced link — NuxtLink/RouterLink with active states |
Element
| Component |
Purpose |
UButton |
Buttons — links, actions, icons, loading states |
UBadge |
Labels, tags, status indicators |
UAvatar |
User photos, initials, icons |
UAvatarGroup |
Stacked avatars with max limit |
UIcon |
Iconify icons (i-{collection}-{name}) |
UCard |
Bordered container with header/body/footer |
UAlert |
Inline messages — info, warning, error, success |
UBanner |
App-wide sticky announcement bar |
UChip |
Notification dot overlay on children |
UKbd |
Keyboard key display |
USeparator |
Divider line with optional label |
USkeleton |
Loading placeholder |
UProgress |
Progress bar |
UProgressGroup |
Segmented progress bar with a list of items |
UToast |
Toast notification (shown via useToast) |
UCalendar |
Date calendar (single, range, multiple) |
UCollapsible |
Animated expand/collapse |
UFieldGroup |
Group form inputs horizontally |
UMarquee |
Scrolling content ticker |
UCarousel |
Image/content carousel with autoplay |
UEmpty |
Empty state placeholder with icon, title, actions |
UError |
Error display with retry action |
UScrollArea |
Scrollable area with custom scrollbar |
UTimeline |
Timeline display for events and activity |
UUser |
User display — avatar + name + description |
UTheme |
Theme provider — scoped color overrides for children |
Form
| Component |
Purpose |
UAuthForm |
Pre-built auth form with social providers |
UInput |
Text input — text, email, password, search |
UTextarea |
Multi-line text with autoresize |
USelect |
Native-like dropdown for small lists |
USelectMenu |
Rich searchable dropdown, multi-select, groups |
UInputMenu |
Autocomplete / combobox |
UInputNumber |
Numeric input with +/- controls |
UInputDate |
Date picker with calendar |
UInputTime |
Time picker (12/24h) |
UInputTags |
Tag/chip input |
UPinInput |
Verification code input |
UCheckbox |
Single boolean checkbox |
UCheckboxGroup |
Multiple checkboxes |
URadioGroup |
Radio button group |
USwitch |
Toggle switch |
USlider |
Range slider |
UColorPicker |
Color picker (hex/rgb/hsl) |
UFileUpload |
File upload (button or drop area) |
UForm |
Validation wrapper with Standard Schema |
UFormField |
Field wrapper with label, hint, errors |
Overlay
| Component |
Purpose |
UModal |
Centered dialog — confirmations, forms |
USlideover |
Side panel — details, editing |
UDrawer |
Bottom sheet — mobile actions |
UPopover |
Contextual popup attached to trigger |
UTooltip |
Hover/focus hint (non-interactive) |
UContextMenu |
Right-click menu |
UCommandPalette |
Search + keyboard navigation (Cmd+K) |
Navigation
| Component |
Purpose |
USidebar |
Standalone sidebar with header/body/footer |
UNavigationMenu |
Primary nav — horizontal or vertical |
UTabs |
Tab switcher within a page |
UBreadcrumb |
Location hierarchy |
UDropdownMenu |
Action menu on a trigger |
UPagination |
Page navigation |
UStepper |
Multi-step wizard |
UAccordion |
Collapsible sections |
Data
| Component |
Purpose |
UTable |
Data table (TanStack Table) with sorting, selection, pinning |
UTree |
Hierarchical tree view |
Dashboard
| Component |
Purpose |
UDashboardGroup |
Root dashboard wrapper |
UDashboardSidebar |
Resizable, collapsible sidebar |
UDashboardPanel |
Content panel with header/body/footer |
UDashboardNavbar |
Panel header bar |
UDashboardToolbar |
Filter/action bar below navbar |
UDashboardResizeHandle |
Resize handle between panels |
UDashboardSidebarToggle |
Mobile sidebar toggle button |
UDashboardSearchButton |
Search button for sidebar |
UDashboardSearch |
Dashboard-level search overlay |
UDashboardSidebarCollapse |
Collapse button for sidebar |
Page (marketing)
| Component |
Purpose |
UPage |
Multi-column layout with left/right sidebars |
UPageHero |
Hero section — title, description, links, media |
UPageSection |
Content section with features grid |
UPageCTA |
Call to action block |
UPageHeader |
Page title and description |
UPageBody |
Main content area |
UPageGrid |
Card grid layout |
UPageColumns |
Multi-column layout |
UPageCard |
Content card for grids |
UPageFeature |
Feature item |
UPageLogos |
Logo cloud |
UPageAside |
Sticky sidebar wrapper |
UPageAnchors |
Simple anchor links |
UPageLinks |
Related resource links |
UPageList |
List layout for page items |
Blog & Changelog
| Component |
Purpose |
UBlogPosts |
Blog post grid |
UBlogPost |
Individual post card |
UChangelogVersions |
Changelog list |
UChangelogVersion |
Individual changelog entry |
Pricing
| Component |
Purpose |
UPricingPlans |
Pricing plan cards |
UPricingPlan |
Individual pricing plan card |
UPricingTable |
Feature comparison table |
Prose — Base Typography
Standard Markdown elements auto-resolved by Comark/Content/MDC. No :: prefix needed — they map directly from markdown syntax (# Heading → ProseH1, **bold** → ProseStrong, etc.). Themed via appConfig.ui.prose.<name>.
| Component |
Renders |
Notable |
H1 H2 H3 H4 |
Headings |
H1–H3 get anchor links + TOC entries |
P |
Paragraph |
|
A |
Link |
External links get target/rel handling |
Strong |
Bold |
|
Em |
Italic |
|
Blockquote |
Blockquote |
|
Hr |
Horizontal rule |
|
Ul Ol Li |
Lists |
Supports nesting and mixed lists |
Table Thead Tbody Tr Th Td |
Tables |
|
Img |
Image |
Zoom on click (:zoom="false" to disable), @nuxt/image support |
Pre |
Code block |
Copy button, filename + icon, line highlighting ({2,4-6}), diff |
Code |
Inline code |
color and lang props |
Prose — Feature Components
Nuxt UI-specific Prose components. In markdown files they are used without the Prose prefix (e.g. ::callout, ::steps). In Vue they are referenced as ProseCallout, ProseSteps, etc. Comark resolves them automatically when @nuxt/ui is installed.
Nuxt UI also registers shorthand aliases for Callout: ::note, ::tip, ::warning, ::caution (preset color + icon).
| Component |
Purpose |
Callout |
Highlighted note/warning/tip (color, icon, to) |
Badge |
Inline badge/tag |
Kbd |
Keyboard key |
Icon |
Inline Iconify icon |
Prompt |
Terminal prompt block |
Card CardGroup |
Content card and card grid |
Steps |
Numbered step list (level prop sets heading depth) |
Tabs TabsItem |
Tabbed content (sync for localStorage, hash for scroll-on-change) |
Accordion AccordionItem |
Collapsible accordion sections |
Collapsible |
Single collapsible section |
Field FieldGroup |
Form field display |
CodeGroup |
Tabbed code blocks |
CodeCollapse |
Collapsible code block |
CodeIcon |
File-type icon in code headers |
CodePreview |
Code + live rendered preview side by side |
CodeTree |
File tree display |
Script |
Script injection |
Content (Nuxt Content)
| Component |
Purpose |
UContentNavigation |
Sidebar navigation from content |
UContentToc |
Table of contents |
UContentSurround |
Prev/next navigation |
UContentSearch |
Search command palette |
UContentSearchButton |
Trigger for content search |
Chat (AI)
| Component |
Purpose |
UChatMessages |
Scrollable message list |
UChatMessage |
Individual message bubble |
UChatReasoning |
Collapsible AI reasoning block |
UChatTool |
Tool invocation status |
UChatShimmer |
Streaming text animation |
UChatPrompt |
Enhanced textarea for prompts |
UChatPromptSubmit |
Submit button with status |
UChatPalette |
Chat layout for overlays |
Editor
| Component |
Purpose |
UEditor |
Rich text editor (JSON/HTML/Markdown) |
UEditorToolbar |
Toolbar (fixed/bubble/floating) |
UEditorDragHandle |
Block drag-and-drop |
UEditorSuggestionMenu |
Slash command menu |
UEditorMentionMenu |
@ mention menu |
UEditorEmojiMenu |
Emoji picker |
Color Mode
| Component |
Purpose |
UColorModeButton |
Toggle button (light/dark) |
UColorModeSwitch |
Toggle switch (light/dark) |
UColorModeSelect |
Dropdown (light/dark/system) |
UColorModeAvatar |
Avatar that changes with color mode |
UColorModeImage |
Image that changes with color mode |
