Setting the file. One moment.
Subchapter 1.1
references/components.mdMarkdown9 KBView on GitHub
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.
| 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 |
| 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 |
| 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 |
| 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) |
| 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 |
| Component | Purpose |
|---|---|
UTable | Data table (TanStack Table) with sorting, selection, pinning |
UTree | Hierarchical tree view |
| 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 |
| 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 |
| Component | Purpose |
|---|---|
UBlogPosts | Blog post grid |
UBlogPost | Individual post card |
UChangelogVersions | Changelog list |
UChangelogVersion | Individual changelog entry |
| Component | Purpose |
|---|---|
UPricingPlans | Pricing plan cards |
UPricingPlan | Individual pricing plan card |
UPricingTable | Feature comparison table |
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 |
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 |
| Component | Purpose |
|---|---|
UContentNavigation | Sidebar navigation from content |
UContentToc | Table of contents |
UContentSurround | Prev/next navigation |
UContentSearch | Search command palette |
UContentSearchButton | Trigger for content search |
| 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 |
| 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 |
| 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 |