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

Preparing the source view

Nuxt UI

references/components.md